本文實例講述了JS實現本地存儲信息的方法。分享給大家供大家參考，具體如下：
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) } } }}使用方法就很簡單了，這節set,get,remove就好了。
里面涉及到的 demo 代碼如下：
<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>還有一個比較實用的技術，阻止頁面關閉，顯示 關閉頁面確認彈出框，參考代碼如下：
window.onbeforeunload = function() { if (!canLeavePage()) { return ('確認離開當前頁面嗎？未保存的數據將會丟失！'); }};更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript錯誤與調試技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
