欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法(基于localStorage與userData)

 更新時(shí)間：2017年02月18日 11:26:06   作者：52php  
這篇文章主要介紹了JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法,基于localStorage與userData實(shí)現(xiàn)本地存儲(chǔ)的功能,需要的朋友可以參考下

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

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

sessionStorage與localStorage

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

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

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

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 設(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的語法
     document.body.appendChild(this.dataDom);
     var exDate = new Date();
     exDate = exDate.getDate()+30;
     this.dataDom.expires = exDate.toUTCString();//設(shè)定過期時(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 代碼如下：

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

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

window.onbeforeunload = function() {
  if (!canLeavePage()) {
    return ('確認(rèn)離開當(dāng)前頁面嗎？未保存的數(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ì)有所幫助。

相關(guān)文章

最新評(píng)論