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

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

伊谢尔伦

リリース： 2016-11-23 14:41:39

オリジナル

940 人が閲覧しました

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): キーフィールドに値を格納します

localStorage.removeItem (key): 削除ローカルに保存されているキーの値を指定

カプセル化

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

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