JS中LocalStorage与SessionStorage五种循序渐进的使⽤
⽅法
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 = Item("value0"),
getV2 = Item("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获取json的key和value第⼆步：使⽤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 = Item("value0"),
getV2 = Item("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 = Item("value0"),
getV2 = Item("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).Item("value"+i));
}
}
}
$(document).on('keyup',function(){
localObj.localSet();
});
localObj.localGet();
2、效果图
3、呦呦...想加多少个，就加多少个value，还不错呦，代码⼜⽐较简洁。不过，问题⼜来了。我不想⼀直使⽤类名value+数字，我已经有写好了的类名了，我想⽤什么名字就⽤什么名字，⽽且不想弄⼀⼤堆localStorage，难道有100个input，就要我弄100个localStorage？？我就想弄⼀个localStorage记录就好。怎么办？？
第五步：使⽤json来存放localStorage
1、JS代码
var localObj = {
localSet: function(){
// 定⼀个对象，来存放键值对
var arr = {};
// 有多少个值，就对应写多少个，名字可随便命名
arr.value0 = $(".value0").val();
arr.value1 = $(".value1").val();
< = $(".go").val();
/
/ 将arr对象转换为string类型
var his = JSON.stringify(arr);
// 设置⼀个localStorage名字叫histroy，值为his
localStorage.setItem("histroy",his);
},
localGet: function(){
// 获取⼀个叫histroy的localStorage，存放在arr变量中
var arr = Item("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、哇～，不错不错，到第五步，基本就已经解决了我们的需求了，不过(TMD还有问题？)哈哈哈哈。。。
1）假设不单单是input要记录上次输⼊内容，复选框CheckBox也要记录是否上次被选中的问题，怎么解决？？
2) 百度翻译使⽤的是多个数组来存放多个内容，怎么弄？？
最后：如果使⽤sessionStorage，直接把localStorage替换成sessionStorage就好了，其它的⼀模⼀样
以上所述是⼩编给⼤家介绍的JS中LocalStorage与SessionStorage五种循序渐进的使⽤⽅法，希望对⼤家有所帮助，如果⼤
家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论