使用userData兼容IE6-10，chrome，F(xiàn)F 及360等瀏覽器的本地存儲(chǔ)

07073游戲?yàn)g覽器v2.0.1.6 官方正式版

• 類型：瀏覽器類大�。�3.7M語(yǔ)言：中文 評(píng)分：6.4
• 標(biāo)簽：

立即下載

開發(fā)過程中涉及本地存儲(chǔ)的使用，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;//防止有些瀏覽器默認(rèn)禁用localStorage，這里優(yōu)先考慮userData本地存儲(chǔ)
try{ //嘗試創(chuàng)建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創(chuàng)建head，可以使存儲(chǔ)數(shù)據(jù)垮目錄訪問
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);取不到值，所以才用了下面比較復(fù)雜的方法。（也許你會(huì)詫異IE9不是有原生的localStorage嗎，是的，但是用戶可以關(guān)閉DOM存儲(chǔ)，所以為了保險(xiǎn)一些還是考慮IE9可能會(huì)使用到#userData吧。）
},
setItem: function(key, value){
root.setAttribute( encode(key), value); //IE9中無法通過 o.setAttribute(name, value); 設(shè)置#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，對(duì)外提供接口
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時(shí)，有的瀏覽器返回null，這里統(tǒng)一返回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);//這里優(yōu)先使用自定義的LS
})(window);

使用方法很簡(jiǎn)單：

對(duì)外提供全局變量LS

存儲(chǔ)：LS.set('userName',"js明哥哥");

讀�。篖S.get('userName');

刪除：LS.remove('userName');

該組件經(jīng)過本人測(cè)試，暫時(shí)沒發(fā)現(xiàn)什么瀏覽器不支持，可能測(cè)試還不夠到位，希望大家多多指點(diǎn)。