您的位置:首页 > 其它

本地存储封装-localStorage,sessionStorage,userData

2017-08-07 12:07 381 查看
h5新增了本地存储localStorage,sessionStorage。UserData是微软为IE专门在系统中开辟的一块存储空间。

chrome, safari, firefox, ie 9都支持 localStorage.。IE6,7需要使用userData进行兼容。 使用 cookie不但容量有限,而且给我们增加了不少的带宽,也进行影响网站的性能。

封装代码如下:

var localData = {
hname:location.hostname?location.hostname:'localStatus',
isLocalStorage:window.localStorage?true:false,
dataDom:null,

initDom:function(){ //初始化userData
if(!this.dataDom){
try{
this.dataDom = document.createElement('input');//这里使用hidden的input元素
this.dataDom.type = 'hidden';
this.dataDom.style.display = "none";
this.dataDom.addBehavior('#default#userData');//这是userData的语法
document.body.appendChild(this.dataDom);
var exDate = new Date();
exDate.setDate(exDate.getDate()+30); //修改!!!
this.dataDom.expires = exDate.toUTCString();//设定过期时间

}catch(ex){
console.log(ex);
return false;
}
}
return true;
},
set:function(key,value){
if(this.isLocalStorage){
window.localStorage.setItem(key,value);
}else{
if(this.initDom()){

this.dataDom.load(this.hname);
this.dataDom.setAttribute(key,value);
this.dataDom.save(this.hname)
}
}
},
get:function(key){
if(this.isLocalStorage){

return window.localStorage.getItem(key);
}else{
console.log("get-userdata");
if(this.initDom()){
console.log(this.dataDom);
this.dataDom.load(this.hname);
return this.dataDom.getAttribute(key);
}
}
},
remove:function(key){
if(this.isLocalStorage){
localStorage.removeItem(key);
}else{
if(this.initDom()){
this.dataDom.load(this.hname);
this.dataDom.removeAttribute(key);
this.dataDom.save(this.hname)
}
}
}
}
//基本测试:主流浏览器及IE下测试通过
localData.set('lala','123');
console.log("00",localData.get("lala")); //123
console.log("11",localData.get("la")); //null


本文参考文章:js本地存储解决方案(localStorage与userData)

原文中代码设置expires处有错误,本文已经纠正。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: