本文實(shí)例講述了JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法。分享給大家供大家參考,具體如下:
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶,將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:主機(jī)域名、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、白水網(wǎng)站維護(hù)、網(wǎng)站推廣。
WEB應(yīng)用的快速發(fā)展,是的本地存儲(chǔ)一些數(shù)據(jù)也成為一種重要的需求,實(shí)現(xiàn)的方案也有很多,最普通的就是cookie了,大家也經(jīng)常都用,但是cookie的缺點(diǎn)是顯而易見(jiàn)的,其他的方案比如:IE6以上的userData,F(xiàn)irefox下面的globalStorage,以及Flash的本地存儲(chǔ),除了Flash之外,其他的幾個(gè)都有一些兼容性的問(wèn)題。
sessionStorage與localStorage
Web Storage實(shí)際上由兩部分組成:sessionStorage與localStorage。
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話(session)中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ),僅僅是會(huì)話級(jí)別的存儲(chǔ)。
localStorage用于持久化的本地存儲(chǔ),除非主動(dòng)刪除數(shù)據(jù),否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。
userData
語(yǔ)法:
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 存儲(chǔ)區(qū)載入存儲(chǔ)的對(duì)象數(shù)據(jù)。removeAttribute()
移除對(duì)象的指定屬性。save(object)
將對(duì)象數(shù)據(jù)存儲(chǔ)到一個(gè) userData 存儲(chǔ)區(qū)。setAttribute()
設(shè)置指定的屬性值。
localStorage
方法:
localStorage.getItem(key):
獲取指定key本地存儲(chǔ)的值localStorage.setItem(key,value):
將value存儲(chǔ)到key字段localStorage.removeItem(key):
刪除指定key本地存儲(chǔ)的值
封裝
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的語(yǔ)法 document.body.appendChild(this.dataDom); var exDate = new Date(); exDate = exDate.getDate()+30; this.dataDom.expires = exDate.toUTCString();//設(shè)定過(guò)期時(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ǎn)單了,這節(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>
還有一個(gè)比較實(shí)用的技術(shù),阻止頁(yè)面關(guān)閉,顯示 關(guān)閉頁(yè)面確認(rèn)彈出框,參考代碼如下:
window.onbeforeunload = function() { if (!canLeavePage()) { return ('確認(rèn)離開(kāi)當(dāng)前頁(yè)面嗎?未保存的數(shù)據(jù)將會(huì)丟失!'); } };
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
網(wǎng)頁(yè)名稱:JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法(基于localStorage與userData)
當(dāng)前網(wǎng)址:http://bm7419.com/article0/jdisoo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、商城網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)站維護(hù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)