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. 用for和while循环求e的值[e=1+1/1!+1/2!+1/3!+1/4!+1/5!+...+1/n!]

    /*编敲代码,依据下面公式求e的值. 要求用两种方法计算: 1)for循环.计算前50项 2)while循环,直至最后一项的值小于10-4 e=1+1/1!+1/2!+1/3!+1/4!+1/5!+. ...

  2. 将bat批处理命令文件固定到任务栏

    将bat批处理命令文件固定到任务栏第一种方法:使用链接工具http://www.xstui.com/read/3451.在任务栏点击右键,移动到工具栏,勾选链接工具2.你会在通知栏左侧看到链接字样,将 ...

  3. jQuery自定义插件规范

    <ul class="list"> <li>导航列表 <ul class="nav"> <li>导航列表1< ...

  4. vue.js提交按钮时简单的if判断表达式示例

    简单的业务需求如下,看图说话 1:当充值金额没有填写的时候,会有Toast小弹框提示"请输入有效的充值金额" if (!this.money) { console.log('mon ...

  5. HUSTOJ 1072 小数背包问题

    HUSTOJ 1072 小数背包问题 题目描述 有一个背包,背包容量是M(0<M≤500),有N(1<N≤1000)个物品,物品可以分割成任意大小. 要求尽可能让装入背包中的物品总价值最大 ...

  6. 【2017 Multi-University Training Contest - Team 9】FFF at Valentine

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6165 [题意] 一张有向图,n个点,m条边,保证没有重边和自环.询问任意两个点能否满足任何一方能够到达另 ...

  7. oracle学习之路(二)------数组类型/记录类型的使用

    Oracle记录类型介绍 RECORD:用户自己定义数据类型,由单行多列的标量构成的复合数据类型.它将一个或多个标量封装成一个对象进行操作记录不能够总体拿来比較也不能够总体推断为空.能够总体拿来赋值. ...

  8. php中 重载(二)

    接着上一次说的重载,我们了解下php中的重载,方法的重载,假设有管重载定义,參考:php中 重载(一)这个文章,谢谢.作为刚開始学习的人,大牛勿喷: 基本是两个方法 __call,当调用对一个不可訪问 ...

  9. 学习笔记(四):jQuery之动画效果

    1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow"," ...

  10. python内存增长问题

    如果你的程序没有调用什么特殊的库, 只是用了很平常的库, 而且使再循环很多的情况下, 那么建议你把循环里的程序拆出来,写成一子函数,循环子函数. 如下面格式: for   (循环) 子函数 这样程序每 ...