localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
需求：本地记录用户上次输入的内容
使用关键技术：localStorage
第一步：使用jQuery的普通写法
1、JS代码
// 获取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); });
2、效果图
3、额额...可以用，不过，问题来了，这JS代码写的...有点乱啊，后期不好维护啊有木有！怎么办？？有什么办法可以解决？？
第二步：使用JS函数方法来写
1、JS代码
// 所用到的变量统一写在一起 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();
2、效果图
3、嗯嗯...改为函数就很容易知道哪个是设置哪个是获取localStorage了，还可以。不过，问题来了，我不想用函数，我要用面向对象写法，怎么办？？
第三步：JS面向对象的写法
1、JS代码
// 所用到的变量统一写在一起 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();
2、效果图
3、哈哈...改了一下就好了，还蛮简单的嘛！不过，问题来了，如果有很多个input框需要记录，那岂不是得写很多代码？能不能循环处理一下？？
第四步：使用for循环的写法
1、JS代码
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();
2、效果图
