JS實現(xiàn)本地存儲信息的方法(基于localStorage與userData)
本文實例講述了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ù)只有在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
localStorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會過期的。
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)閉頁面確認(rèn)彈出框，參考代碼如下：
window.onbeforeunload = function() {
if (!canLeavePage()) {
return ('確認(rèn)離開當(dāng)前頁面嗎？未保存的數(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è)計有所幫助。
相關(guān)文章
這篇文章主要介紹了詳解JavaScript之Array.reduce源碼解讀，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
在這篇文章中給大家分享了關(guān)于JavaScript實用代碼小技巧的相關(guān)內(nèi)容，有興趣的朋友們可以參考學(xué)習(xí)下。2018-08-08
掌握一些JavaScript的精簡書寫方式,有助增強代碼的閱讀性,提升代碼質(zhì)量,任何一種編程語言的簡寫小技巧都是為了幫助你寫出更簡潔、更完善的代碼,讓你用更少的編碼實現(xiàn)你的需求2023-08-08
JavaScript實現(xiàn)數(shù)據(jù)類型的相互轉(zhuǎn)換
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)數(shù)據(jù)類型的相互轉(zhuǎn)換，感興趣的朋友可以參考一下2016-03-03
這篇文章主要介紹了使用js實現(xiàn)一個簡單的滾動條過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要給大家介紹了關(guān)于JS溫故而知新之變量提升和時間死區(qū)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
Bootstrap Table 在指定列中添加下拉框控件并獲取所選值
通過 bootstrap-table 的Column 配置項中的formatter，將獲取到的數(shù)據(jù)轉(zhuǎn)換為包含數(shù)據(jù)的 select 控件。然后根據(jù)用戶選擇項更新對應(yīng)單元格數(shù)據(jù)，最后通過getallselection方法獲取所選行數(shù)據(jù)2017-07-07
這篇文章主要介紹了解析JS在獲取當(dāng)前月的最后一天遇到的坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
微信小程序?qū)崿F(xiàn)預(yù)約生成二維碼功能
通過點擊預(yù)約按鈕即可生成二維碼憑碼入校參觀,下面小編通過實例代碼講解微信小程序?qū)崿F(xiàn)預(yù)約生成二維碼功能,感興趣的朋友跟隨小編一起看看吧2024-04-04
JavaScript觸發(fā)器詳解...2007-03-03