您好,登錄后才能下訂單哦!
本文實例講述了JS實現(xiàn)本地存儲信息的方法。分享給大家供大家參考,具體如下:
WEB應(yīng)用的快速發(fā)展,是的本地存儲一些數(shù)據(jù)也成為一種重要的需求,實現(xiàn)的方案也有很多,最普通的就是cookie了,大家也經(jīng)常都用,但是cookie的缺點是顯而易見的,其他的方案比如:IE6以上的userData,F(xiàn)irefox下面的globalStorage,以及Flash的本地存儲,除了Flash之外,其他的幾個都有一些兼容性的問題。
sessionStorage與localStorage
Web Storage實際上由兩部分組成:sessionStorage與localStorage。
sessionStorage用于本地存儲一個會話(session)中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。
localStorage用于持久化的本地存儲,除非主動刪除數(shù)據(jù),否則數(shù)據(jù)是永遠不會過期的。
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 設(shè)置或者獲取 userData behavior 保存數(shù)據(jù)的失效日期。
XMLDocument 獲取 XML 的引用。
方法:
getAttribute()
獲取指定的屬性值。
load(object)
從 userData 存儲區(qū)載入存儲的對象數(shù)據(jù)。
removeAttribute()
移除對象的指定屬性。
save(object)
將對象數(shù)據(jù)存儲到一個 userData 存儲區(qū)。
setAttribute()
設(shè)置指定的屬性值。
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();//設(shè)定過期時間 }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) } } } }
使用方法就很簡單了,這節(jié)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>
還有一個比較實用的技術(shù),阻止頁面關(guān)閉,顯示 關(guān)閉頁面確認彈出框,參考代碼如下:
window.onbeforeunload = function() { if (!canLeavePage()) { return ('確認離開當前頁面嗎?未保存的數(shù)據(jù)將會丟失!'); } };
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。