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

xiaoxiao2021-02-28  94

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处有错误,本文已经纠正。

转载请注明原文地址: https://www.6miu.com/read-82904.html

最新回复(0)