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>

Scriptingobject .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 returnfalse;
19                 }
20             }
21 returntrue;
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 returnthis.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就好了。