情報のローカル ストレージを実装するための JS メソッド (localStorage と userData に基づく)

この記事では、情報のローカルストレージを実装するためのJSの方法を主に紹介します。localStorageとuserDataに基づいてローカルストレージ機能を実装します。

この記事の例は、JSの実装方法を説明しています。情報のローカルストレージ。参考までに皆さんと共有してください。詳細は次のとおりです:

WEB アプリケーションの急速な発展に伴い、一部のデータのローカル ストレージが重要な要件となり、最も一般的なものは Cookie です。誰もがよく使用しますが、Cookie の欠点は明らかです。IE6 以降の userData、Firefox の globalStorage、Flash を除くその他のソリューションには互換性の問題があります。

sessionStorage と localStorage

Web Storage は、実際には sessionStorage と localStorage の 2 つの部分で構成されます。

sessionStorage は、セッション内のデータをローカルに保存するために使用されます。これらのデータは、同じセッション内のページからのみアクセスでき、セッションが終了するとデータは破棄されます。したがって、sessionStorage は永続的なローカル ストレージではなく、セッション レベルのストレージにすぎません。

localStorage は、データがアクティブに削除されない限り、永続的なローカル ストレージとして使用されます。

userData

構文:

XML ac30a5c96f4f4444229a975fc13164b1
HTML a1425322c08987e8e89e711328a16a57
スクリプトオブジェクト .style.behavior = "url('#default#userData')"
object .addBehavior ("#default#userData")

属性:

expires 保存されたデータの userData 動作の有効期限を設定または取得します。
XMLDocument XML への参照を取得します。

Method:

getAttribute() 指定された属性値を取得します。 getAttribute() 获取指定的属性值。
load(object) 从 userData 存储区载入存储的对象数据。
removeAttribute() 移除对象的指定属性。
save(object) 将对象数据存储到一个 userData 存储区。
setAttribute() 设置指定的属性值。

localStorage

方法：

localStorage.getItem(key):获取指定key本地存储的值
localStorage.setItem(key,value)：将value存储到key字段
localStorage.removeItem(key):load(object) 格納されているオブジェクトデータをuserData格納領域からロードします。

removeAttribute() オブジェクトの指定された属性を削除します。

save(object) オブジェクトデータを userData 保存領域に保存します。

setAttribute() 指定された属性値を設定します。

localStorage

メソッド:

localStorage.getItem(key):指定されたキーのローカルストレージの値を取得します

localStorage.setItem(key) 、 value): 値をキー フィールドに保存します
localStorage.removeItem(key):指定されたキーのローカルに保存されている値を削除します

Encapsulation

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();//设定过期时间
    }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 を使用するだけです。

関連するデモ コードは次のとおりです。

🎜🎜🎜

<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 中国語 Web サイトに注目してください。 🎜🎜🎜🎜