需求：本地记录用户上次输入的内容
使用关键技术：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代码
 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();
2、效果图
3、嗯嗯...改为函数就很容易知道哪个是设置哪个是获取localstorage了，还可以。不过，问题来了，我不想用函数，我要用面向对象写法，怎么办？？
第三步：js面向对象的写法
1、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();
2、效果图
3、哈哈...改了一下就好了，还蛮简单的嘛！不过，问题来了，如果有很多个input框需要记录，那岂不是得写很多代码？能不能循环处理一下？？
第四步：使用for循环的写法
1、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();
2、效果图
3、呦呦...想加多少个，就加多少个value，还不错呦，代码又比较简洁。不过，问题又来了。我不想一直使用类名value+数字，我已经有写好了的类名了，我想用什么名字就用什么名字，而且不想弄一大堆localstorage，难道有100个input，就要我弄100个localstorage？？我就想弄一个localstorage记录就好。怎么办？？
第五步：使用json来存放localstorage
1、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,值为his13         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值赋值给对应的li25             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();
2、效果图
3、哇～，不错不错，到第五步，基本就已经解决了我们的需求了，不过(tmd还有问题？)哈哈哈哈。。。
1）假设不单单是input要记录上次输入内容，复选框checkbox也要记录是否上次被选中的问题，怎么解决？？
2) 百度翻译使用的是多个数组来存放多个内容，怎么弄？？
最后：如果使用sessionstorage，直接把localstorage替换成sessionstorage就好了，其它的一模一样！！！
在html5中，新加入了一个localstorage和sessionstorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localstorage中一般浏览器支持的是5m大小，这个在不同的浏览器中localstorage和sessionstorage会有所不同。
web storage和cookie的区别
web storage的概念和cookie相似，区别是它是为了更大容量存储设计的。cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，web storage拥有setitem,getitem,removeitem,clear等方法，不像cookie需要前端开发者自己封装setcookie，getcookie。
但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为http规范的一部分而存在 ，而web storage仅仅是为了在本地“存储”数据而生
以上就是localstorage与sessionstorage五种循序渐进的使用方法的详细内容。