localStorage與sessionStorage五種循序漸進(jìn)的使用方法

// 獲取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);
});

 1 // 所用到的變量統(tǒng)一寫在一起 2 var va,va2,getV,getV2; 3 // 設(shè)置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 // 鍵盤按鍵彈起就設(shè)置localStorage的值18 $(document).on('keyup',function(){19 localSet();20 });21 // 頁面一加載就調(diào)用設(shè)置localStorage的方法22 localGet();

 1 // 所用到的變量統(tǒng)一寫在一起 2 var va,va2,getV,getV2; 3 var localObj = { 4 // 設(shè)置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 // 頁面一加載就調(diào)用設(shè)置localStorage的方法23 localObj.localGet();

 1 var localObj = { 2 // 設(shè)置localStorage方法 3 localSet : function(){ 4 // 我這里測(cè)試用的，所以直接選中所有的input長度，實(shí)際使用換成相同類名即可 5 for (var i = 0; i < $("input").length; i++) { 6 // 這里要注意，所有的localStorage的key都要相同，只是數(shù)字不同而已 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 // 獲取對(duì)應(yīng)的key值，因?yàn)檫@里使用的是value+數(shù)字，所以直接這樣獲取即可14 $(".value"+i).val(localStorage.getItem("value"+i));15 }16 }17 }18 $(document).on('keyup',function(){19 localObj.localSet();20 });21 localObj.localGet();

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