开发过程中涉及本地存储的使用,IE很多版本都不支持localStorage,没办法,就得兼容使用userData了。废话不说了,看代码:

(function(window){
var LS;
(function(){

var o = document.getElementsByTagName("head")[0],
n = window.location.hostname || "localStorage",
d = new Date(),doc,agent;
//typeof o.addBehavior 在IE6下是object,在IE10下是function,因此这里直接用!判断
if(!o.addBehavior)return;//防止有些浏览器默认禁用localStorage,这里优先考虑userData本地存储
try{ //尝试创建iframe代理
agent = new ActiveXObject('htmlfile');
agent.open();
agent.write('<s' + 'cript>document.w=window;</s' + 'cript><iframe src="/favicon.ico"></frame>');
agent.close();
doc = agent.w.frames[0].document;
}catch(e){doc = document;}
o = doc.createElement('head');//这里通过代理document创建head,可以使存储数据垮目录访问
doc.appendChild(o);
d.setDate(d.getDate() + 36500);
o.addBehavior("#default#userData");
o.expires = d.toUTCString();
o.load(n);

var root = o.XMLDocument.documentElement,
attrs = root.attributes,
prefix = "prefix_____hack__",
reg1 = /^[-\d]/,
reg2 = new RegExp("^"+prefix),
encode = function(key){
return reg1.test(key) ? prefix + key : key;
},
decode = function(key){
return key.replace(reg2,"");
};

LS= {
length: attrs.length,
notNativeCode: true,
getItem: function(key){
return (attrs.getNamedItem( encode(key) ) || {nodeValue: null}).nodeValue||root.getAttribute(encode(key)); //IE9中 通过o.getAttribute(name);取不到值,所以才用了下面比较复杂的方法。(也许你会诧异IE9不是有原生的localStorage吗,是的,但是用户可以关闭DOM存储,所以为了保险一些还是考虑IE9可能会使用到#userData吧。)
},
setItem: function(key, value){
root.setAttribute( encode(key), value); //IE9中无法通过 o.setAttribute(name, value); 设置#userData值,而用下面的方法却可以。
o.save(n);
this.length = attrs.length;
},
removeItem: function(key){
root.removeAttribute( encode(key) ); //IE9中无法通过 o.removeAttribute(name); 删除#userData值,而用下面的方法却可以。
o.save(n);
this.length = attrs.length;
},
clear: function(){
while(attrs.length){
this.removeItem( attrs[0].nodeName );
}
this.length = 0;
},
key: function(i){
return attrs[i] ? decode(attrs[i].nodeName) : undefined;
}
};
})();

(function(w,localStorage){//封装LS,对外提供接口
var f = function(){return null;};
w.LS = localStorage?{
set : function(key, value){
//fixed iPhone/iPad 'QUOTA_EXCEEDED_ERR' bug
if( this.get(key) !== undefined )
this.remove(key);
localStorage.setItem(key, value);
},
//查询不存在的key时,有的浏览器返回null,这里统一返回undefined
get : function(key){
var v = localStorage.getItem(key);
return v === null ? undefined : v;
},
remove : function(key){ localStorage.removeItem(key); },
clear : function(){ localStorage.clear(); },
each : function(callback){
var list = this.obj(), fn = callback || function(){}, key;
for(key in list)
if( fn.call(this, key, this.get(key)) === false )
break;
},
obj : function(){
var list={}, i=0, n, key;
if( localStorage.isVirtualObject ){
list = localStorage.key(-1);
}else{
n = localStorage.length;
for(; i<n; i++){
key = localStorage.key(i);
list[key] = this.get(key);
}
}
return list;
}
}:{set:f,get:f,remove:f,clear:f,each:f,obj:f};//如果都不支持则所有方法返回null
})(window,LS||window.localStorage);//这里优先使用自定义的LS
})(window);

使用方法很简单:

对外提供全局变量LS

存储:LS.set('userName',"js明哥哥");

读取:LS.get('userName');

删除:LS.remove('userName');

该组件经过本人测试,暂时没发现什么浏览器不支持,可能测试还不够到位,希望大家多多指点。

使用userData兼容IE6-10,chrome,FF 及360等浏览器的本地存储的更多相关文章

  1. [转载]使用兼容ie6 ie7 ie8 FF的text-overflow:ellips

    使用兼容ie6 ie7 ie8 FF的text-overflow:ellipsis超出文本显示省略号来代替截取函数更有利于seo,如果使用截取函数,源代码中的标题是显示不完整的,即便是在title属性 ...

  2. 浮出层的css写法,完美兼容IE6~10

    利用元素间的绝对定位差一像素,使用不同颜色做出浮出层小三角的效果,完美兼容各浏览器! html部分: <div class="poptip"> <span cla ...

  3. 七行jquery代码实现图片渐变切换【兼容ie6+、 Chrome、 Firefox】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 兼容ie6及以上和firefox等标准浏览器的表格行滑过时背景色切换的效果

    一.js代码——"tablehover.js" /**      *②.表格单元行滑过时高亮样式动效组件封装      *oop形式封装交互动效类      *组件说明这个组件是为 ...

  5. Localstorage本地存储兼容函数

    前言HTML5提供了本地存储的API:localstorage对象和sessionStorage对象,实现将数据存储到用户的电脑上.Web存储易于使用.支持大容量(但非无限量)数据同时存储,同时兼容当 ...

  6. 本地存储组件--兼容IE低版本

        在前端开发过程中,会用到本地缓存,但是由于浏览器对不同规范支持的程度不一样,每次进行使用都要为兼容行花费不少时间.我整理了一个本地存储的组件.     组件特点: 可以配置使用localSto ...

  7. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...

  8. DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

    1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...

  9. DIV+CSS IE6/IE7/IE8/FF兼容问题大全

    1. [代码][CSS]代码 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居 ...

随机推荐

  1. Docker 创建虚拟机并且远程链接

    快读创建虚拟机 使用我编辑的镜像(688M) docker run -itd --name=test03 -p 5523:22 registry.cn-beijing.aliyuncs.com/act ...

  2. HTTP 请求/响应报文结构

    请求报文和响应报文都是由以下4部分组成: 1.请求行/响应行 2.请求头/响应头 3.空行 4.消息主体(请求体/响应体) 请求报文结构 请求行 格式为:Method Request-URI HTTP ...

  3. [Unity Shader] 切线空间的法线贴图

    切线空间的法线贴图,可以这样理解: #纹理坐标是从0到1,它的坐标是x向右,y向下 #顶点坐标是从-1到-1,坐标是x向右,y向上 1 由表面上某点的切线Tangent.副切线Bitangent.法线 ...

  4. alibaba/fescar 阿里巴巴 开源 分布式事务中间件

    Fescar 是 阿里巴巴 开源的 分布式事务中间件,以 高效 并且对业务 0 侵入 的方式,解决 微服务 场景下面临的分布式事务问题. 示例:https://github.com/windwant/ ...

  5. RabbitMQ入门:总结

    随着上一篇博文的发布,RabbitMQ的基础内容我也学习完了,RabbitMQ入门系列的博客跟着收官了,以后有机会的话再写一些在实战中的应用分享,多谢大家一直以来的支持和认可. RabbitMQ入门系 ...

  6. php快速上手总结

    PHP作为现代热门主流的开发语言,对于那些想加入新手PHPer,从哪学起,如何学习?你必须要需要掌握PHP的基础知识,基础知识相当于重点,是不可忽视的知识.常用的功能模块,面向对象的,MVC等相关技能 ...

  7. SQL Server 各版本安装包分享

    已将SQL Server 2005以上各版本的安装包分享到百度云盘,有需要的朋友可以下载进行安装,相关安装教程可以百度搜索.安装遇到难以解决的问题可以留言给我,2016版以上在选择功能的时候建议初学者 ...

  8. java抽象类与接口区别

    java抽象类与接口区别: abstract class和interface是Java语言中对于抽象类定义进行支持的两种机制,正是由于这两种机制的存在,才赋予了Java强大的面向对象能力. abstr ...

  9. 基于tensorflow实现mnist手写识别 (多层神经网络)

    标题党其实也不多,一个输入层,三个隐藏层,一个输出层 老样子先上代码 导入mnist的路径很长,现在还记不住 import tensorflow as tf import tensorflow.exa ...

  10. layui数据表格使用(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)

    表格展示神器之一:layui表格 前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...