本地存儲策略

除了Struts2、springmvc提供的緩存策略，你是否還知道其他保存策略？例如js的localData（持久化方式）和sessionData（回話級別）以及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本地存儲的值

封裝

<p>使用方法就很簡單了，這節set,get,remove就好了。</p>
<p>下面這個例子，在你輸入之後，然後刷新頁面，也會保留相應的值。</p>
<p></p>
<p><input id="localDataHook" type="text" /><input type="button" id="clearBtnHook" value="清除" /></p>
<script type="text/javascript">
(function(){
window.localData = {
        hname:location.hostname?location.hostname:'localStatus',
        isLocalStorage:window.localStorage?true:false,
        dataDom:null,

        initDom:function(){
            if(!this.dataDom){
                try{
                    this.dataDom = document.createElement('input');
                    this.dataDom.type = 'hidden';
                    this.dataDom.style.display = "none";
                    this.dataDom.addBehavior('#default#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)
                }
            }
        }
    }

    var text = document.getElementById('localDataHook');
    var btn = document.getElementById('clearBtnHook');
    window.onbeforeunload = function(){
        localData.set('beiyuuData',text.value);
    }
    btn.onclick = function(){localData.remove('beiyuuData');text.value=''};
    if(localData.get('beiyuuData')){
        text.value = localData.get('beiyuuData');
    }
})</script>