JSでローカルストレージとuserDataを使用して情報を保存する方法

本文实例讲述了 JS 实现本地存储信息的方法。分享给大家供大家参考，具体如下：

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")

属性:

userData 保存数据的失效日期设置或获取 expires。
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のローカルストレージの値を削除します

封装

localData = {
  hname:location.hostname&63;location.hostname:'localStatus',
  ;window.localStorage&63;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();//設定有効期限
    }
     return false;
    }
   }
   return true;
  },
  set:function(key,value){
   if(this.isLocalStorage){
    window.localStorage.setItem(key,value);
   }
    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);
   }
    if(this.initDom()){
     this.dataDom.load(this.hname);
     return this.dataDom.getAttribute(key);
    }
   }
  },
  remove:function(key){
   if(this.isLocalStorage){
    localStorage.removeItem(key);
   }
    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 &63; location.hostname : 'localStatus',
    isLocalStorage : window.localStorage63; 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);
      }
        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);
      }
        if (this.initDom()) {
          this.dataDom.load(this.hname);
          return this.dataDom.getAttribute(key);
        }
      }
    },
    remove : function(key) {
      if (this.isLocalStorage) {
        localStorage.removeItem(key);
      }
        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>

ページを閉じることを阻止する非常に実用的な技術があり、ページを閉じる確認ダイアログを表示する、以下の参照コードを示します：

window.onbeforeunload = function() {
  if (!canLeavePage()) {
    ('ページを離れることを確認しますか？未保存のデータは失われます！')を返します；
  }
};

JavaScriptに関するさらに詳しい内容に興味がある読者は、以下のサイトの特集をチェックしてください：《javascriptオブジェクト指向入門チュートリアル》、《JavaScript検索アルゴリズムの技術的な要約》、《JavaScriptデータ構造とアルゴリズムの技術的な要約》、《JavaScript中のjson操作の技術的な要約》、《JavaScriptエラーとデバッグの技術的な要約》および《JavaScript数学演算の用法の要約》

この記事が皆さんのJavaScriptプログラム設計に役立つことを願っています。

声明：この記事の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、アップロードした内容であり、このサイトは所有権を有しておらず、編集も行われていません。著作権侵害が疑われる内容がある場合は、メールでお知らせください：notice#oldtoolbag.com（メール送信時、#を@に変更してください）で報告してください。関連する証拠を提供し、一旦確認されると、このサイトは即座に侵害疑いのコンテンツを削除します。