ホームページ  >  記事  >  ウェブフロントエンド  >  js ローカル ストレージ ソリューション - localStorage と userData

js ローカル ストレージ ソリューション - localStorage と userData

黄舟
黄舟オリジナル
2017-02-25 13:36:11850ブラウズ

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

sessionStorage と localStorage

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

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

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

userData

構文:

XML  <Prefix: CustomTag ID=sID STYLE="behavior:url(&#39;#default#userData&#39;)" />

HTML  <ELEMENT STYLE="behavior:url(&#39;#default#userData&#39;)" ID=sID>

Scripting    object .style.behavior = "url(&#39;#default#userData&#39;)"

object.addBehavior ("#default#userData")

属性:

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

  • XMLDocument XML への参照を取得します。

Method:

  • getAttribute() 指定された属性値を取得します。

  • load(object)は、格納されているオブジェクトデータをuserData格納領域からロードします。

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

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

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

localStorage

メソッド:

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

  • localStorage.setItem(key, value): キーに値を格納しますfield

  • localStorage.removeItem(key): 指定されたキーのローカル ストレージ値を削除します

Encapsulation

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

上記は、js ローカル ストレージ ソリューションの内容です - localStorage と userData 関連する内容については、こちらをご覧ください。 PHP 中国語 Web サイト (www.php. cn) に注意してください。



声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。