Html5的localStorage與sessionStorage五種按部就班的使用方法

時間 2019-11-16

標籤 html5 html localstorage sessionstorage 五種按部就班使用方法欄目 HTML5 简体版

原文原文鏈接

需求：本地記錄用戶上次輸入的內容json

使用關鍵技術：localStorage數組

第一步：使用jQuery的普通寫法瀏覽器

一、JS代碼session

// 獲取window的localStorage對象
var localS = window.localStorage;
// 獲取localStorage的值
var getV = localS.getItem("value0"),
    getV2 = localS.getItem("value1");
// 把獲取到的值賦給對應的input
$(".value0").val(getV);
$(".value1").val(getV2);
// 鍵盤按鍵彈起就設置localStorage的值
$(document).on("keyup",function(){
    // 一個輸入框對應一個value值
    var va = $(".value0").val(),
        va2 = $(".value1").val();
    // 有多少個就設置setItem多少個
    localS.setItem("value0",va);
    localS.setItem("value1",va2);
});

二、效果圖函數

三、額額...能夠用，不過，問題來了，這JS代碼寫的...有點亂啊，後期很差維護啊有木有！怎麼辦？？有什麼辦法能夠解決？？測試

第二步：使用JS函數方法來寫spa

一、JS代碼翻譯

 1 // 所用到的變量統一寫在一塊兒
 2 var va,va2,getV,getV2;
 3 // 設置localStorage方法
 4 function localSet(){
 5     va = $(".value0").val(),
 6     va2 = $(".value1").val();
 7     localStorage.setItem("value0",va);
 8     localStorage.setItem("value1",va2);
 9 };
10 // 獲取localStorage方法
11 function localGet(){
12     getV = localStorage.getItem("value0"),
13     getV2 = localStorage.getItem("value1");
14     $(".value0").val(getV);
15     $(".value1").val(getV2);
16 }
17 // 鍵盤按鍵彈起就設置localStorage的值
18 $(document).on('keyup',function(){
19     localSet();
20 });
21 // 頁面一加載就調用設置localStorage的方法
22 localGet();

二、效果圖3d

三、嗯嗯...改成函數就很容易知道哪一個是設置哪一個是獲取localStorage了，還能夠。不過，問題來了，我不想用函數，我要用面向對象寫法，怎麼辦？？code

第三步：JS面向對象的寫法

一、JS代碼

 1 // 所用到的變量統一寫在一塊兒
 2 var va,va2,getV,getV2;
 3 var localObj = {
 4     // 設置localStorage方法
 5     localSet : function(){
 6         va = $(".value0").val(),
 7         va2 = $(".value1").val();
 8         localStorage.setItem("value0",va);
 9         localStorage.setItem("value1",va2);
10     },
11     // 獲取localStorage方法
12     localGet : function(){
13         getV = localStorage.getItem("value0"),
14         getV2 = localStorage.getItem("value1");
15         $(".value0").val(getV);
16         $(".value1").val(getV2);
17     }
18 }
19 $(document).on('keyup',function(){
20     localObj.localSet();
21 });
22 // 頁面一加載就調用設置localStorage的方法
23 localObj.localGet();

二、效果圖

三、哈哈...改了一下就行了，還蠻簡單的嘛！不過，問題來了，若是有不少個input框須要記錄，那豈不是得寫不少代碼？能不能循環處理一下？？

第四步：使用for循環的寫法

一、JS代碼

 1 var localObj = {
 2     // 設置localStorage方法
 3     localSet : function(){
 4         // 我這裏測試用的，因此直接選中全部的input長度，實際使用換成相同類名便可
 5         for (var i = 0; i < $("input").length; i++) {
 6             // 這裏要注意，全部的localStorage的key都要相同，只是數字不一樣而已
 7             localStorage.setItem("value"+i,$(".value"+i).val());
 8         }
 9     },
10     // 獲取localStorage方法
11     localGet : function(){
12         for (var i = 0; i < $("input").length; i++) {
13             // 獲取對應的key值，由於這裏使用的是value+數字，因此直接這樣獲取便可
14             $(".value"+i).val(localStorage.getItem("value"+i));
15         }
16     }
17 }
18 $(document).on('keyup',function(){
19     localObj.localSet();
20 });
21 localObj.localGet();

二、效果圖

三、呦呦...想加多少個，就加多少個value，還不錯呦，代碼又比較簡潔。不過，問題又來了。我不想一直使用類名value+數字，我已經有寫好了的類名了，我想用什麼名字就用什麼名字，並且不想弄一大堆localStorage，難道有100個input，就要我弄100個localStorage？？我就想弄一個localStorage記錄就好。怎麼辦？？

第五步：使用json來存放localStorage

一、JS代碼

 1 var localObj = {
 2     localSet: function(){
 3         // 定一個對象，來存放鍵值對
 4         var arr = {};
 5             // 有多少個值，就對應寫多少個，名字可隨便命名
 6             arr.value0 = $(".value0").val();
 7             arr.value1 = $(".value1").val();
 8             arr.good = $(".good").val();
 9             arr.go = $(".go").val();
10         // 將arr對象轉換爲string類型
11         var his = JSON.stringify(arr);
12         // 設置一個localStorage名字叫histroy,值爲his
13         localStorage.setItem("histroy",his);
14     },
15     localGet: function(){
16         // 獲取一個叫histroy的localStorage,存放在arr變量中
17         var arr = localStorage.getItem("histroy");
18         // 把獲取來的arr轉換成json格式
19         var json = JSON.parse(arr);
20         // 遍歷Json中的數據
21         for (var li in json) {
22             // 由json字符串轉換爲json對象
23             var value = eval("json['" + li +"']");
24             // 把取到的對應的value值賦值給對應的li
25             arr.li = value;
26             // 最後一步，顯示對應的value值
27             $("."+li).val(value);
28         }
29     }
30 }
31 // 鍵盤按鍵彈起的時候改變localStorage的值
32 $(document).on('keyup',function(){
33     localObj.localSet();
34 });
35 // 瀏覽器一打開就顯示存儲在localStorage裏面的值
36 // 即記錄上次輸入的值
37 localObj.localGet();