JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法(基于localStorage與userData)
本文實(shí)例講述了JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法。分享給大家供大家參考,具體如下:
WEB應(yīng)用的快速發(fā)展,是的本地存儲(chǔ)一些數(shù)據(jù)也成為一種重要的需求,實(shí)現(xiàn)的方案也有很多,最普通的就是cookie了,大家也經(jīng)常都用,但是cookie的缺點(diǎn)是顯而易見的,其他的方案比如:IE6以上的userData,F(xiàn)irefox下面的globalStorage,以及Flash的本地存儲(chǔ),除了Flash之外,其他的幾個(gè)都有一些兼容性的問題。
sessionStorage與localStorage
Web Storage實(shí)際上由兩部分組成:sessionStorage與localStorage。
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話(session)中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ),僅僅是會(huì)話級(jí)別的存儲(chǔ)。
localStorage用于持久化的本地存儲(chǔ),除非主動(dòng)刪除數(shù)據(jù),否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。
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 存儲(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的語法 document.body.appendChild(this.dataDom); var exDate = new Date(); exDate = exDate.getDate()+30; this.dataDom.expires = exDate.toUTCString();//設(shè)定過期時(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ù),阻止頁面關(guān)閉,顯示 關(guān)閉頁面確認(rèn)彈出框,參考代碼如下:
window.onbeforeunload = function() { if (!canLeavePage()) { return ('確認(rèn)離開當(dāng)前頁面嗎?未保存的數(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ì)有所幫助。
- JavaScript本地存儲(chǔ)的幾種方式小結(jié)
- Javascript本地存儲(chǔ)localStorage看這一篇就夠了
- 詳解JavaScript前端如何有效處理本地存儲(chǔ)和緩存
- JavaScript本地存儲(chǔ)全面解析
- javascript中l(wèi)ocalStorage本地存儲(chǔ)(新增、刪除、修改)使用詳細(xì)教程
- JavaScript中本地存儲(chǔ)(LocalStorage)和會(huì)話存儲(chǔ)(SessionStorage)的使用
- 基于js 本地存儲(chǔ)(詳解)
- javascript中本地存儲(chǔ)localStorage,sessionStorage,cookie,indexDB的用法與使用場(chǎng)景匯總
相關(guān)文章
使用ajax的post同步執(zhí)行(實(shí)現(xiàn)方法)
下面小編就為大家分享一篇使用ajax的post同步執(zhí)行(實(shí)現(xiàn)方法),具有很好的參考價(jià)值,希望對(duì)大家有所幫助2017-12-12完美實(shí)現(xiàn)js選項(xiàng)卡切換效果(二)
這篇文章主要為大家詳細(xì)介紹如何完美實(shí)現(xiàn)js選項(xiàng)卡切換效果,通過設(shè)置定時(shí)器實(shí)現(xiàn)延時(shí)0.5s切換選項(xiàng)卡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03設(shè)置點(diǎn)擊文本框或圖片彈出日歷控件的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄O(shè)置點(diǎn)擊文本框或圖片彈出日歷控件的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過來看看吧2016-05-05javascript中slice(),splice(),split(),substring(),substr()使用方法
這篇文章主要介紹了javascript中slice(),splice(),split(),substring(),substr()使用方法,需要的朋友可以參考下2015-03-03JavaScript方法_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript方法,詳細(xì)的介紹了JavaScript幾種函數(shù)定義方式及使用方法,感興趣的小伙伴們可以參考一下2017-06-06