您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)LocalStorage與SessionStorage怎么在JavaScript中使用,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
第一步:使用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(); }); // 頁(yè)面一加載就調(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(); }); // 頁(yè)面一加載就調(diào)用設(shè)置localStorage的方法 localObj.localGet();
2、效果圖
3、哈哈...改了一下就好了,還蠻簡(jiǎn)單的嘛!不過,問題來了,如果有很多個(gè)input框需要記錄,那豈不是得寫很多代碼?能不能循環(huán)處理一下??
第四步:使用for循環(huán)的寫法
1、JS代碼
var localObj = { // 設(shè)置localStorage方法 localSet : function(){ // 我這里測(cè)試用的,所以直接選中所有的input長(zhǎng)度,實(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ò)呦,代碼又比較簡(jiǎn)潔。不過,問題又來了。我不想一直使用類名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)容,怎么弄??
關(guān)于LocalStorage與SessionStorage怎么在JavaScript中使用就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。