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. CODEVS——T3008 加工生产调度

    http://codevs.cn/problem/3008/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descr ...

  2. AsyncTask源代码翻译

    前言: /** <p>AsyncTask enables proper and easy use of the UI thread. This class allows to perfor ...

  3. java 三次样条插值 画光滑曲线 例子

    java 三次样条插值 画光滑曲线 例子 主要是做数值拟合,根据sin函数采点,取得数据后在java中插值并在swing中画出曲线,下面为截图  不光滑和光滑曲线前后对比:    代码: 执行类: p ...

  4. 一句话解决Ping问题(主机,开发板,虚拟机)

    PC机使用网卡A连接开发板,VMWare就要使用同一个网卡A作为桥接网卡 步骤: 1.确定网卡A 2.VMWare选择网卡A作为桥接网卡 3.设置三者IP在同一网段 a.Windows网卡A的IP b ...

  5. 八、Docker+RabbitMQ

    原文:八.Docker+RabbitMQ 一.下载镜像 docker pull rabbitmq:management 二.运行 docker run -d --name rabbitmq -e TZ ...

  6. 【hdu 1083】Courses

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=1083 [Description] 有p门的课,每门课都有若干学生,现在要为每个课程分配一名课代表, ...

  7. 【Unity3D自学记录】鼠标移动三维物体

    创建一个脚本.例如以下: using UnityEngine; using System.Collections; public class OnMouse : MonoBehaviour { IEn ...

  8. COOKIE传值

    1.遍历所有cookie foreach (string  _key in Request.Cookies.AllKeys)//遍历主键            {                Htt ...

  9. Android 继承framelayout,实现ScrollView 和 HorizontalScrollView 的效果

    有些项目,需要让控件或者布局进行水平和垂直同时能拖拽,当然,ScrollView 和 HorizontalScrollView 的结合写法是一种写法.但是,这么写用户体验效果不佳,会有迟钝感,因此推荐 ...

  10. Eclipse如何从导入SVN上导入项目

    1.右键单击,选择 Import,进入导入项目窗口 2.点击选择从SVN检出项目,点击Next下一步 3.选择创建新的资源库位置,点击Next,如果项目之前已经导入过删除掉了,重新导入的时候,只需勾选 ...