js本地儲存解決方案－localStorage與userData-js教程-PHP中文網

js本地儲存解決方案－localStorage與userData

伊谢尔伦

發布： 2016-11-23 14:41:39

原創

964 人瀏覽過

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(&#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 behavior 儲存資料的失效日期。

XMLDocument 取得 XML 的參考。

方法:

getAttribute() 取得指定的屬性值。

load(object) 從 userData 儲存區載入儲存的物件資料。

removeAttribute() 移除物件的指定屬性。

save(object) 將物件資料儲存到一個 userData 儲存區。

setAttribute() 設定指定的屬性值。

localStorage

方法：

localStorage.getItem(key):取得指定key本地儲存的值

localStorage.setItem(key,value)：將value.指定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)
            }
        }
    }
}

登入後複製