js本地存储解决方案(localStorage与userData)

WEB应用的快速发展，是的本地存储一些数据也成为一种重要的需求，实现的方案也有很多，最普通的就是cookie了，大家也经常都用，但是cookie的缺点是显而易见的，其他的方案比如：IE6以上的userData，Firefox下面的globalStorage，以及Flash的本地存储，除了Flash之外，其他的几个都有一些兼容性的问题。

sessionStorage与localStorage

Web Storage实际上由两部分组成：sessionStorage与localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

userData

语法：

XML <Prefix: CustomTag ID=sID STYLE="behavior:url('#default#userData')" />

HTML <ELEMENT STYLE="behavior:url('#default#userData')" ID=sID>

Scripting object .style.behavior = "url('#default#userData')"

object .addBehavior ("#default#userData")

属性:

expires 设置或者获取 userData behavior 保存数据的失效日期。

XMLDocument 获取 XML 的引用。

方法:

getAttribute() 获取指定的属性值。

load(object) 从 userData 存储区载入存储的对象数据。

removeAttribute() 移除对象的指定属性。

save(object) 将对象数据存储到一个 userData 存储区。

setAttribute() 设置指定的属性值。

localStorage

方法：

localStorage.getItem(key):获取指定key本地存储的值

localStorage.setItem(key,value)：将value存储到key字段

localStorage.removeItem(key):删除指定key本地存储的值

封装

 1 localData = { 2         hname:location.hostname?location.hostname:'localStatus', 3         isLocalStorage:window.localStorage?true:false, 4         dataDom:null, 5  6         initDom:function(){ //初始化userData 7             if(!this.dataDom){ 8                 try{ 9                     this.dataDom = document.createElement('input');//这里使用hidden的input元素10                     this.dataDom.type = 'hidden';11                     this.dataDom.style.display = "none";12                     this.dataDom.addBehavior('#default#userData');//这是userData的语法13                     document.body.appendChild(this.dataDom);14                     var exDate = new Date();15                     exDate = exDate.getDate()+30;16                     this.dataDom.expires = exDate.toUTCString();//设定过期时间17                 }catch(ex){18                     return false;19                 }20             }21             return true;22         },23         set:function(key,value){24             if(this.isLocalStorage){25                 window.localStorage.setItem(key,value);26             }else{27                 if(this.initDom()){28                     this.dataDom.load(this.hname);29                     this.dataDom.setAttribute(key,value);30                     this.dataDom.save(this.hname)31                 }32             }33         },34         get:function(key){35             if(this.isLocalStorage){36                 return window.localStorage.getItem(key);37             }else{38                 if(this.initDom()){39                     this.dataDom.load(this.hname);40                     return this.dataDom.getAttribute(key);41                 }42             }43         },44         remove:function(key){45             if(this.isLocalStorage){46                 localStorage.removeItem(key);47             }else{48                 if(this.initDom()){49                     this.dataDom.load(this.hname);50                     this.dataDom.removeAttribute(key);51                     this.dataDom.save(this.hname)52                 }53             }54         }55     }

使用方法就很简单了，这节set,get,remove就好了。

下面这个例子，在你输入之后，然后刷新页面，也会保留相应的值。

转载于:https://www.cnblogs.com/Code-Engineering/p/5745438.html