JS中LocalStorage与SessionStorage五种循序渐进的使用方法

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

// 所用到的变量统一写在一起
var va,va2,getV,getV2;
// 设置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);
}
// 键盘按键弹起就设置localStorage的值
$(document).on('keyup',function(){
 localSet();
});
// 页面一加载就调用设置localStorage的方法
localGet();

// 所用到的变量统一写在一起
var va,va2,getV,getV2;
var localObj = {
 // 设置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();
});
// 页面一加载就调用设置localStorage的方法
localObj.localGet();

var localObj = {
 // 设置localStorage方法
 localSet : function(){
  // 我这里测试用的，所以直接选中所有的input长度，实际使用换成相同类名即可
  for (var i = 0; i < $("input").length; i++) {
   // 这里要注意，所有的localStorage的key都要相同，只是数字不同而已
   localStorage.setItem("value"+i,$(".value"+i).val());
  }
 },
 // 获取localStorage方法
 localGet : function(){
  for (var i = 0; i < $("input").length; i++) {
   // 获取对应的key值，因为这里使用的是value+数字，所以直接这样获取即可
   $(".value"+i).val(localStorage.getItem("value"+i));
  }
 }
}
$(document).on('keyup',function(){
 localObj.localSet();
});
localObj.localGet();

var localObj = {
 localSet: function(){
  // 定一个对象，来存放键值对
  var arr = {};
   // 有多少个值，就对应写多少个，名字可随便命名
   arr.value0 = $(".value0").val();
   arr.value1 = $(".value1").val();
   arr.good = $(".good").val();
   arr.go = $(".go").val();
  // 将arr对象转换为string类型
  var his = JSON.stringify(arr);
  // 设置一个localStorage名字叫histroy,值为his
  localStorage.setItem("histroy",his);
 },
 localGet: function(){
  // 获取一个叫histroy的localStorage,存放在arr变量中
  var arr = localStorage.getItem("histroy");
  // 把获取来的arr转换成json格式
  var json = JSON.parse(arr);
  // 遍历Json中的数据
  for (var li in json) {
   // 由json字符串转换为json对象
   var value = eval("json['" + li +"']");
   // 把取到的对应的value值赋值给对应的li
   arr.li = value;
   // 最后一步，显示对应的value值
   $("."+li).val(value);
  }
 }
}
// 键盘按键弹起的时候改变localStorage的值
$(document).on('keyup',function(){
 localObj.localSet();
});
// 浏览器一打开就显示存储在localStorage里面的值
// 即记录上次输入的值
localObj.localGet();