JS中LocalStorage與SessionStorage五種循序漸進(jìn)的使用方法
localStorage和sessionStorage一樣都是用來存儲(chǔ)客戶端臨時(shí)信息的對(duì)象。
他們均只能存儲(chǔ)字符串類型的對(duì)象(雖然規(guī)范中可以存儲(chǔ)其他原生類型的對(duì)象,但是目前為止沒有瀏覽器對(duì)其進(jìn)行實(shí)現(xiàn))。
localStorage生命周期是永久,這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息,否則這些信息將永遠(yuǎn)存在。
sessionStorage生命周期為當(dāng)前窗口或標(biāo)簽頁,一旦窗口或標(biāo)簽頁被永久關(guān)閉了,那么所有通過sessionStorage存儲(chǔ)的數(shù)據(jù)也就被清空了。
不同瀏覽器無法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共享相同的localStorage(頁面屬于相同域名和端口),但是不同頁面或標(biāo)簽頁間無法共享sessionStorage的信息。這里需要注意的是,頁面及標(biāo)簽頁僅指頂級(jí)窗口,如果一個(gè)標(biāo)簽頁包含多個(gè)iframe標(biāo)簽且他們屬于同源頁面,那么他們之間是可以共享sessionStorage的。
需求:本地記錄用戶上次輸入的內(nèi)容
使用關(guān)鍵技術(shù):localStorage
第一步:使用jQuery的普通寫法
1、JS代碼
// 獲取window的localStorage對(duì)象
var localS = window.localStorage;
// 獲取localStorage的值
var getV = localS.getItem("value0"),
getV2 = localS.getItem("value1");
// 把獲取到的值賦給對(duì)應(yīng)的input
$(".value0").val(getV);
$(".value1").val(getV2);
// 鍵盤按鍵彈起就設(shè)置localStorage的值
$(document).on("keyup",function(){
// 一個(gè)輸入框?qū)?yīng)一個(gè)value值
var va = $(".value0").val(),
va2 = $(".value1").val();
// 有多少個(gè)就設(shè)置setItem多少個(gè)
localS.setItem("value0",va);
localS.setItem("value1",va2);
});
2、效果圖

3、額額...可以用,不過,問題來了,這JS代碼寫的...有點(diǎn)亂啊,后期不好維護(hù)啊有木有!怎么辦??有什么辦法可以解決??
第二步:使用JS函數(shù)方法來寫
1、JS代碼
// 所用到的變量統(tǒng)一寫在一起
var va,va2,getV,getV2;
// 設(shè)置localStorage方法
function localSet(){
va = $(".value0").val(),
va2 = $(".value1").val();
localStorage.setItem("value0",va);
localStorage.setItem("value1",va2);
};
// 獲取localStorage方法
function localGet(){
getV = localStorage.getItem("value0"),
getV2 = localStorage.getItem("value1");
$(".value0").val(getV);
$(".value1").val(getV2);
}
// 鍵盤按鍵彈起就設(shè)置localStorage的值
$(document).on('keyup',function(){
localSet();
});
// 頁面一加載就調(diào)用設(shè)置localStorage的方法
localGet();
2、效果圖

3、嗯嗯...改為函數(shù)就很容易知道哪個(gè)是設(shè)置哪個(gè)是獲取localStorage了,還可以。不過,問題來了,我不想用函數(shù),我要用面向?qū)ο髮懛?,怎么辦??
第三步:JS面向?qū)ο蟮膶懛?/strong>
1、JS代碼
// 所用到的變量統(tǒng)一寫在一起
var va,va2,getV,getV2;
var localObj = {
// 設(shè)置localStorage方法
localSet : function(){
va = $(".value0").val(),
va2 = $(".value1").val();
localStorage.setItem("value0",va);
localStorage.setItem("value1",va2);
},
// 獲取localStorage方法
localGet : function(){
getV = localStorage.getItem("value0"),
getV2 = localStorage.getItem("value1");
$(".value0").val(getV);
$(".value1").val(getV2);
}
}
$(document).on('keyup',function(){
localObj.localSet();
});
// 頁面一加載就調(diào)用設(shè)置localStorage的方法
localObj.localGet();
2、效果圖

3、哈哈...改了一下就好了,還蠻簡單的嘛!不過,問題來了,如果有很多個(gè)input框需要記錄,那豈不是得寫很多代碼?能不能循環(huán)處理一下??
第四步:使用for循環(huán)的寫法
1、JS代碼
var localObj = {
// 設(shè)置localStorage方法
localSet : function(){
// 我這里測(cè)試用的,所以直接選中所有的input長度,實(shí)際使用換成相同類名即可
for (var i = 0; i < $("input").length; i++) {
// 這里要注意,所有的localStorage的key都要相同,只是數(shù)字不同而已
localStorage.setItem("value"+i,$(".value"+i).val());
}
},
// 獲取localStorage方法
localGet : function(){
for (var i = 0; i < $("input").length; i++) {
// 獲取對(duì)應(yīng)的key值,因?yàn)檫@里使用的是value+數(shù)字,所以直接這樣獲取即可
$(".value"+i).val(localStorage.getItem("value"+i));
}
}
}
$(document).on('keyup',function(){
localObj.localSet();
});
localObj.localGet();
2、效果圖

3、呦呦...想加多少個(gè),就加多少個(gè)value,還不錯(cuò)呦,代碼又比較簡潔。不過,問題又來了。我不想一直使用類名value+數(shù)字,我已經(jīng)有寫好了的類名了,我想用什么名字就用什么名字,而且不想弄一大堆localStorage,難道有100個(gè)input,就要我弄100個(gè)localStorage??我就想弄一個(gè)localStorage記錄就好。怎么辦??
第五步:使用json來存放localStorage
1、JS代碼
var localObj = {
localSet: function(){
// 定一個(gè)對(duì)象,來存放鍵值對(duì)
var arr = {};
// 有多少個(gè)值,就對(duì)應(yīng)寫多少個(gè),名字可隨便命名
arr.value0 = $(".value0").val();
arr.value1 = $(".value1").val();
arr.good = $(".good").val();
arr.go = $(".go").val();
// 將arr對(duì)象轉(zhuǎn)換為string類型
var his = JSON.stringify(arr);
// 設(shè)置一個(gè)localStorage名字叫histroy,值為his
localStorage.setItem("histroy",his);
},
localGet: function(){
// 獲取一個(gè)叫histroy的localStorage,存放在arr變量中
var arr = localStorage.getItem("histroy");
// 把獲取來的arr轉(zhuǎn)換成json格式
var json = JSON.parse(arr);
// 遍歷Json中的數(shù)據(jù)
for (var li in json) {
// 由json字符串轉(zhuǎn)換為json對(duì)象
var value = eval("json['" + li +"']");
// 把取到的對(duì)應(yīng)的value值賦值給對(duì)應(yīng)的li
arr.li = value;
// 最后一步,顯示對(duì)應(yīng)的value值
$("."+li).val(value);
}
}
}
// 鍵盤按鍵彈起的時(shí)候改變localStorage的值
$(document).on('keyup',function(){
localObj.localSet();
});
// 瀏覽器一打開就顯示存儲(chǔ)在localStorage里面的值
// 即記錄上次輸入的值
localObj.localGet();
2、效果圖

3、哇~,不錯(cuò)不錯(cuò),到第五步,基本就已經(jīng)解決了我們的需求了,不過(TMD還有問題?)哈哈哈哈。。。
1)假設(shè)不單單是input要記錄上次輸入內(nèi)容,復(fù)選框CheckBox也要記錄是否上次被選中的問題,怎么解決??
2) 百度翻譯使用的是多個(gè)數(shù)組來存放多個(gè)內(nèi)容,怎么弄??

最后:如果使用sessionStorage,直接把localStorage替換成sessionStorage就好了,其它的一模一樣?。?!
以上所述是小編給大家介紹的JS中LocalStorage與SessionStorage五種循序漸進(jìn)的使用方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 使用JS獲取SessionStorage的值
- JS 中LocalStorage和SessionStorage的使用
- JS localStorage存儲(chǔ)對(duì)象,sessionStorage存儲(chǔ)數(shù)組對(duì)象操作示例
- js前端存儲(chǔ)之sessionStorage使用方法舉例
- JavaScript中本地存儲(chǔ)(LocalStorage)和會(huì)話存儲(chǔ)(SessionStorage)的使用
- JavaScript本地儲(chǔ)存:localStorage、sessionStorage、cookie的使用
- JavaScript中window.sessionStorage的具體使用
相關(guān)文章
JS 清除字符串?dāng)?shù)組中,重復(fù)元素的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫S 清除字符串?dāng)?shù)組中,重復(fù)元素的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
JS實(shí)現(xiàn)電話號(hào)碼的字母組合算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)電話號(hào)碼的字母組合算法,結(jié)合實(shí)例形式分析了javascript組合運(yùn)算的相關(guān)算法原理與操作技巧,需要的朋友可以參考下2019-02-02
javascript 圖片上傳預(yù)覽-兼容標(biāo)準(zhǔn)
js圖片上傳預(yù)覽2009-06-06
JavaScript實(shí)現(xiàn)數(shù)字?jǐn)?shù)組按照倒序排列的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)字?jǐn)?shù)組按照倒序排列的方法,涉及javascript中sort方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04

