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

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('#default#userData')" />

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

Scripting object .style.behavior = "url('#default#userData')"

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字段

localStorage.removeItem(key):刪除指定key本地存儲的值

封裝

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

本篇文章轉自 http://www.cnblogs.com/beiyuu/archive/2011/07/20/js-localstorage-userdata.html