JS實作本機儲存資訊的方法(基於localStorage與userData)

這篇文章主要介紹了JS實現本地存儲資訊的方法,基於localStorage與userData實現本地存儲的功能,需要的朋友可以參考下

本文實例講述了JS實現本地存儲信息的方法。分享給大家供大家參考，具體如下：

WEB應用的快速發展，是的本地存儲一些數據也成為一種重要的需求，實現的方案也有很多，最普通的就是cookie了，大家也常都用，但是cookie的缺點是顯而易見的，其他的方案例如：IE6以上的userData，Firefox下面的globalStorage，以及Flash的本地存儲，除了Flash之外，其他的幾個都有一些兼容性的問題。

sessionStorage與localStorage

Web Storage其實由兩部分組成：sessionStorage與localStorage。

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。因此sessionStorage不是持久的本機存儲，只是會話層級的儲存。

localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

userData

語法：

XML  <br>HTML  <ELEMENT STYLE="behavior:url('#default#userData')" ID=sID><br>Scripting  object .style. behavior = "url('#default#userData')"<br>object .addBehavior ("#default#userData")</p> <p><span style="color: #0000ff"><strong>屬性:</strong></span></p> <p>expires 設定或取得u​​serData behavior 儲存資料的失效日期。 <br>XMLDocument 取得對 XML 的參考。 </p> <p><span style="color: #0000ff"><strong>方法:</strong></span></p> <p><code>getAttribute()</code> 取得指定的屬性值。 <br><code>load(object) </code>從 userData 儲存區載入儲存的物件資料。 <br><code>removeAttribute() </code>移除物件的指定屬性。 <br><code>save(object) </code>將物件資料儲存到一個 userData 儲存區。 <br><code>setAttribute() </code>設定指定的屬性值。 <br></p> <p><strong>localStorage</strong></p> <p><span style="color: #0000ff"><strong>方法：</strong></span></p> <p><code>localStorage.getItem(key ):</code>取得指定key本地儲存的值<br><code>localStorage.setItem(key,value)：</code>將value儲存到key欄位<br><code>localStorage.removeItem(key):</code>刪除指定key本地儲存的值</p> <p>封裝</p> <p class="jb51code"><br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>localData = { hname:location.hostname?location.hostname:&#39;localStatus&#39;, isLocalStorage:window.localStorage?true:false, dataDom:null, initDom:function(){ //初始化userData if(!this.dataDom){ try{ this.dataDom = document.createElement(&#39;input&#39;);//这里使用hidden的input元素 this.dataDom.type = &#39;hidden&#39;; this.dataDom.style.display = "none"; this.dataDom.addBehavior(&#39;#default#userData&#39;);//这是userData的语法 document.body.appendChild(this.dataDom); var exDate = new Date(); exDate = exDate.getDate()+30; this.dataDom.expires = exDate.toUTCString();//设定过期时间 }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) } } } }

登入後複製

使用方法就很簡單了，這節set,get,remove就好了。

裡面涉及的demo 程式碼如下：

<script type="text/javascript">
(function() {
  window.localData = {
    hname : location.hostname ? location.hostname : &#39;localStatus&#39;,
    isLocalStorage : window.localStorage ? true : false,
    dataDom : null,
    initDom : function() {
      if (!this.dataDom) {
        try {
          this.dataDom = document.createElement(&#39;input&#39;);
          this.dataDom.type = &#39;hidden&#39;;
          this.dataDom.style.display = "none";
          this.dataDom.addBehavior(&#39;#default#userData&#39;);
          document.body.appendChild(this.dataDom);
          var exDate = new Date();
          exDate = exDate.getDate() + 30;
          this.dataDom.expires = exDate.toUTCString();
        } 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)
        }
      }
    }
  };
  var text = document.getElementById(&#39;localDataHook&#39;);
  var btn = document.getElementById(&#39;clearBtnHook&#39;);
  window.onbeforeunload = function() {
    localData.set(&#39;beiyuuData&#39;, text.value);
  };
  btn.onclick = function() {
    localData.remove(&#39;beiyuuData&#39;);
    text.value = &#39;&#39;
  };
  if (localData.get(&#39;beiyuuData&#39;)) {
    text.value = localData.get(&#39;beiyuuData&#39;);
  }
})();
</script>

還有一個比較實用的技術，阻止頁面關閉，顯示關閉頁面確認彈出框，參考程式碼如下：

window.onbeforeunload = function() {
  if (!canLeavePage()) {
    return ('确认离开当前页面吗？未保存的数据将会丢失！');
  }

希望本文所述對大家JavaScript程式設計有所幫助。

更多JS實作本地儲存資訊的方法(基於localStorage與userData)相關文章請關注PHP中文網！