本文實(shí)例講述了JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法。分享給大家供大家參考，具體如下：

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、白水網(wǎng)站維護(hù)、網(wǎng)站推廣。

WEB應(yīng)用的快速發(fā)展，是的本地存儲(chǔ)一些數(shù)據(jù)也成為一種重要的需求，實(shí)現(xiàn)的方案也有很多，最普通的就是cookie了，大家也經(jīng)常都用，但是cookie的缺點(diǎn)是顯而易見(jiàn)的，其他的方案比如：IE6以上的userData，F(xiàn)irefox下面的globalStorage，以及Flash的本地存儲(chǔ)，除了Flash之外，其他的幾個(gè)都有一些兼容性的問(wèn)題。

sessionStorage與localStorage

Web Storage實(shí)際上由兩部分組成：sessionStorage與localStorage。

sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。

localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。

userData

語(yǔ)法：

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

屬性:

expires 設(shè)置或者獲取 userData behavior 保存數(shù)據(jù)的失效日期。
XMLDocument 獲取 XML 的引用。

方法:

getAttribute() 獲取指定的屬性值。
load(object) 從 userData 存儲(chǔ)區(qū)載入存儲(chǔ)的對(duì)象數(shù)據(jù)。
removeAttribute() 移除對(duì)象的指定屬性。
save(object) 將對(duì)象數(shù)據(jù)存儲(chǔ)到一個(gè) userData 存儲(chǔ)區(qū)。
setAttribute() 設(shè)置指定的屬性值。

localStorage

方法：

localStorage.getItem(key):獲取指定key本地存儲(chǔ)的值
localStorage.setItem(key,value)：將value存儲(chǔ)到key字段
localStorage.removeItem(key):刪除指定key本地存儲(chǔ)的值

封裝

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的語(yǔ)法
     document.body.appendChild(this.dataDom);
     var exDate = new Date();
     exDate = exDate.getDate()+30;
     this.dataDom.expires = exDate.toUTCString();//設(shè)定過(guò)期時(shí)間
    }catch(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{
    if(this.initDom()){
     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)
    }
   }
  }
}

使用方法就很簡(jiǎn)單了，這節(jié)set,get,remove就好了。

里面涉及到的 demo 代碼如下：

還有一個(gè)比較實(shí)用的技術(shù)，阻止頁(yè)面關(guān)閉，顯示 關(guān)閉頁(yè)面確認(rèn)彈出框，參考代碼如下：

window.onbeforeunload = function() {
  if (!canLeavePage()) {
    return ('確認(rèn)離開(kāi)當(dāng)前頁(yè)面嗎？未保存的數(shù)據(jù)將會(huì)丟失！');
  }
};

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。