本文详细解析了Web存储中localStorage与sessionStorage的基础区别，并通过五个由浅入深的代码示例，演示如何从基础读写到面向对象封装、循环处理及JSON存储，最终实现高效的用户输入记录功能。
LocalStorage与SessionStorage基础区别
localStorage和sessionStorage均为Web存储接口，用于在客户端保存临时数据。
目前主流浏览器仅支持存储字符串类型的对象。尽管规范允许存储其他原生类型，但实际实现中仍受限于字符串格式。
localStorage的数据生命周期为永久。除非用户通过浏览器界面手动清除，否则数据将一直保留在本地。
sessionStorage的数据生命周期仅在当前窗口或标签页会话期间有效。一旦窗口或标签页被关闭，存储的数据即被清空。
不同浏览器之间的localStorage或sessionStorage数据无法共享。同一浏览器下，若页面属于相同的域名和端口，则这些页面可以共享localStorage。然而，不同页面或标签页之间无法共享sessionStorage。需要注意的是，这里的页面特指顶级窗口；若标签页内包含多个同源的iframe，它们之间可以共享sessionStorage。
LocalStorage五种进阶用法
应用场景：在本地记录用户上次的输入内容。
核心技术：localStorage。
实现方案一：采用jQuery的标准写法。
1、JavaScript代码实现
// 获取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代码结构较为混乱，后期维护成本较高。如何解决这一问题？
实现方案二：采用JavaScript函数封装方式。
1、JavaScript代码实现
// 所用到的变量统一写在一起
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的操作，结构更为合理。但若希望采用面向对象编程风格，应如何处理？
实现方案三：采用JavaScript面向对象写法。
1、JavaScript代码实现
// 所用到的变量统一写在一起
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、JavaScript代码实现
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、运行效果展示
3、呦呦...想加多少个，就加多少个value，还不错呦，代码又比较简洁。不过，问题又来了。我不想一直使用类名value+数字，我已经有写好了的类名了，我想用什么名字就用什么名字，而且不想弄一大堆localStorage，难道有100个input，就要我弄100个localStorage？？我就想弄一个localStorage记录就好。怎么办？？
实现方案五：采用JSON格式存储localStorage。
1、JavaScript代码实现
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();2、运行效果展示
3、经过前四步的迭代，基本满足了记录用户输入的需求。但仍有潜在问题：例如，若需同时记录复选框（CheckBox）的选中状态，或利用类似百度翻译的多数组存储机制，该如何处理？
复杂场景与SessionStorage替换
1）假设不仅input需要记录上次输入内容，复选框CheckBox也要记录是否上次被选中的问题，怎么解决？？
2) 百度翻译使用的是多个数组来存放多个内容，怎么弄？？
最后：如果使用sessionStorage，直接把localStorage替换成sessionStorage就好了，其它的一模一样！！！
以上所述是小编给大家介绍的JS中LocalStorage与SessionStorage五种循序渐进的使用方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！