localStorage是H5的存储方案,各大浏览器支持都相当不错,唯一悲催的就是IE,这个浏览器界的另类总是显得格格不入。

IE “Internet选项”->“安全”中有一个“启动保护模式”的单选项,在选中的情况下localStorage是无法使用的,直接提示“拒绝访问”,就算不勾选,下次打开IE时也很有可能弹出“是否启用保护模式”的提示,此时除了做兼容没有更好的办法

兼容方案一:userData

userData是IE专属的浏览器存储机制,注意IE8+不支持(你说悲催不悲催)。userData的原理网上很多,就不再赘述,您可以点击下方有参考资料查看,这里直接贴出代码

var box = document.body || document.documentElement || document.getElementsByTagName('head')[0];
var o = document.createElement("input");
o.type = "hidden";
o.style.display = "none";
o.addBehavior("#default#userData");
box.appendChild( o );
var exDate = new Date();
exDate.setDate(exDate.getDate()+365);
o.expires = exDate.toUTCString();//设定过期时间
var FileName = "localStorageKeyCache";
var cacheName = "kv"; o.setAttribute( cacheName , data.join(",") );
o.save( FileName ); o.load( FileName );
var getData = o.getAttribute( cacheName );
if( getData ){
console.log( getData );
}

userData本质上是一个文件,因此存储的时候需要提供文件名,然后就可以通过setAttribute设置key/value,删除可以通过removeAttribute方法,不管对userData做什么修改最后都需要通过save()方法进行保存

读取userData必须先用load()方法加载文件,然后用getAttribute获取

由于userData仅支持IE8以下的浏览器,IE9,10,11就的另想办法

兼容方案二:cookie

cookie一直都是localStorage兜底的办法,不管哪个版本的IE都支持,只可惜存储的数据少了点。cookie存储数据网上很多教程,这里不再赘述

总结:

localStorage兼容,简单的就直接判断能用就用,不行就用cookie,个人感觉userData实在鸡肋,直接用cookie更方便

参考资料:

http://www.cnblogs.com/xiaohuochai/p/6595959.html

http://www.cnblogs.com/QLeelulu/archive/2008/03/29/1129322.html

http://blog.csdn.net/csyuyaoxiadn/article/details/12836955

localStorage兼容方案的更多相关文章

  1. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  2. 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  3. Emoji表情符号兼容方案(适用ios,android,wp等平台)

    http://blog.csdn.net/qdkfriend/article/details/7576524 Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(え ...

  4. Drawable 着色的后向兼容方案

    看到 Android Weekly 最新一期有一篇文章:Tinting drawables,使用 ColorFilter 手动打造了一个TintBitmapDrawable,之前也看到有些文章使用这种 ...

  5. [ios2]Emoji表情符号兼容方案 【转】

    Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. emoji ...

  6. 最新CSS兼容方案

    CSS兼容方案,让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了. .e {/*FF OP*/ color: ...

  7. Emoji表情符号兼容方案

    Emoji表情符号兼容方案 一 什么是Emoji    emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. em ...

  8. 移动端 ios 长按复制兼容方案

    移动端页面,需要复制一段文字码. 在ios中,长按文字区域,默认选中的范围,超出了我长按的文字区域, 把上面的图片和下面的另一个div的文字也给我包含进来了,并不是我想要的! 举个例子: 如下图: 1 ...

  9. css透明背景兼容方案

    css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样 ...

随机推荐

  1. python实现获取文件列表中每一个文件keyword

    功能描写叙述: 获取某个路径下的全部文件,提取出每一个文件里出现频率最高的前300个字.保存在数据库其中. 前提.你须要配置好nltk #!/usr/bin/python #coding=utf-8 ...

  2. listview-fading 滚动条样式设置

    fadingEdge-属性用来设置拉滚动条时 ,边框渐变的方向.它有三个属性值可以设置 none:(边框颜色不变) horizontal:(水平方向颜色变淡) vertical:(垂直方向颜色变淡). ...

  3. R 语言下常用第三方库的说明

    1. doBy 官方文档见 CRAN - Package doBy doBy 主要适用于以下操作: 1) Facilities for groupwise computations of summar ...

  4. Flask设置配置文件

    Flask修改配置: from flask import Flask app = Flask(__name__) app.config['DEBUG'] = True @app.route('/') ...

  5. CF1009F Dominant Indices(树上DSU/长链剖分)

    题目大意: 就是给你一棵以1为根的树,询问每一个节点的子树内节点数最多的深度(相对于这个子树根而言)若有多解,输出最小的. 解题思路: 这道题用树链剖分,两种思路: 1.树上DSU 首先想一下最暴力的 ...

  6. 银行测试 http://blog.csdn.net/stillming/article/details/42275251

    从一家工作了五年的软件公司的测试管理者跳槽到**银行做软件测试,短短两个月,对银行测试有了初步认识,总结和记录下来,加深个人的理解,同时也共享给各位. 银行作为大家的理财顾问,对金钱非常敏感,频繁甚至 ...

  7. Spring学习总结(11)——Spring JMS MessageConverter介绍

    消息转换器MessageConverter MessageConverter的作用主要有两方面,一方面它可以把我们的非标准化Message对象转换成我们的目标Message对象,这主要是用在发送消息的 ...

  8. 2. Spring Boot Controller

    转自:https://blog.csdn.net/catoop/article/details/50501676

  9. 有关Canvas的一点小事--鼠标绘图

    1.  如何根据鼠标位置获取canvas上对应位置的x,y. 2.  canvas的图糊了,设置宽和高的方式不对. 3.鼠标绘图代码 之前听说过canvas这个元素,但是实际上并没有深入了解过.不过日 ...

  10. vue 自定义modal 模态框组件

    参数名 类型 说明 visible Boolean 是否显示,默认false title String 标题 update:visible Boolean 更新visible, 使用:visible. ...