js ローカルストレージソリューション - localStorage と userData-jsチュートリアル-php.cn

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

黄舟

リリース： 2017-02-25 13:36:11

オリジナル

925 人が閲覧しました

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) に注意してください。