小伙伴们，咱们今天来聊聊H5中的那个叫做LocalStorage的小家伙。你知道吗，它就像网页的小小银行，可以帮我们储存各种网页上的信息，哪怕我们把浏览器关掉再重新开启，那些信息也不会消失！感觉棒不棒？别急，接下来就让我们一起揭开LocalStorage如何在本地存储更新信息和我们在使用过程中应该注意哪些事项！
LocalStorage的基础用法
LocalStorage就是一种能让你保存在浏览器里的数据不会消失的神奇技术。你可以把它当作一个隐身的盒子，存放网页上的各种东东。操作方法超级简单，就像往里头塞东西或取出一样。比如，想要存个数据，只要这么做：`localStorage.setItem(‘key’,’value’)`,这里的’key’就是用来标记这个物品的标签，’value’是你想放进去的内容。想要找回某个物品，那么直接用`localStorage.getItem(‘key’)`就行！
“本地存储”和”会话存储”有啥不一样？
LocalStorage和SessionStorage这俩货，名字挺像，其实用法可差远了。SessionStorage就像个“即用即丢”的储物柜，只要你关掉浏览器，里面的东西全没了。而LocalStorage则是个持久的储存柜，即使你走得再久，它里头的东西都还在等你回来。所以，用的时候要慎重，选对适合自己的存储方式，才能让网页数据管理得井井有条！
实战案例：保存用户输入的内容
下面咱们来看看一个实实在在的例子，就是怎么用LocalStorage给网页上的用户输入保驾护航。比如说在手机钉钉里填写请假日志这事，用了LocalStorage以后，只要你没清除记录，哪怕关掉浏览器，那些数据也不会跑路，下次再看还是老样子，方便极了！这不光提升了大家用起来的感觉，还能帮着咱们更有效地管理数据。
LocalStorage的注意事项
用LocalStorage时得记住两点！首先，它只认字符串！所以想存别的，像数字、对象这类的，要先转成字符串再存起来；然后，别把重要信息放这儿，小心被坏人偷走！
LocalStorage的应用场景
if(!localStorage.getItem("text")) //window对象的话，前面的window省略了哦
localStorage.setItem("text",""); //这里先判断一下，做空白存储，否则返回 NULL 显示出来体验不好，这里的if大括号省去了
localStorage.text = localStorage.getItem("text"); //取值
$("textarea").html(localStorage.text); //显示
$("textarea").keyup(function(){ //这里有很多，比如blur, change, keydown, 还有做个定时器也行，实用于多字段存储
localStorage.setItem("text",$(this).val()); //重新存储
});
LocalStorage不只是存东西那么简单，它还有挺多好玩儿的用处！比如说，你可以创建一个网页，每刷一次，那个计数器就能往上跳一点，这不就是靠着LocalStorage！就算你关掉浏览器，下回再开回来，那个计数器还是能继续往上蹦哒的！
如何优雅地使用LocalStorage
想要用好LocalStorage，得掌握点门道儿。比如说，怎么搞定大容量数据储存，怎么提高存取速度，这才是让网页快起来的秘诀！而且，别忘了跟其他技术配合起来使，比如用JSON修饰一下，这样能让数据存取更给力~
if(window.sessionStorage){
alert('ok');
}else{
alert('fail');
}
// 设置值
sessionStorage.setItem('key_a', 1);
// 取值
var key_a = sessionStorage.getItem('key_a');
console.log(key_a);
// 删除
sessionStorage.removeItem('key_a');
console.log(sessionStorage.getItem('key_a'));// null
sessionStorage.setItem('key_b', 1);
sessionStorage.setItem('key_c', 2);
// 清除所有键值
sessionStorage.clear();
console.log(sessionStorage.key_b);
console.log(sessionStorage.key_c);
console.log('==================');
// 设置值和取值也可以使用.符号，类似于取对象属性
// 设置值
sessionStorage.key_d = 12;
// 取值
var key_d = sessionStorage.key_d;
console.log(key_d);
// 有个小区别，如果这个key没有了。一个返回值undefined，一个是null
console.log(sessionStorage.key_null);// undefined
console.log(sessionStorage.getItem('key_null'));// null
console.log('==========简单演示一个存放对象的例子========');
var obj = {
a : 12,
b : [1,2,3,4,5],
c : {
x : 'a',
y : ['bb', 12, 'cc', {a:1,b:2}],
z : 1333
}
};
sessionStorage.setItem('page', JSON.stringify(obj));
// 取值
var page = JSON.parse(sessionStorage.getItem('page'));
console.log(page);
// 遍历下数组
for(var i=0;i< page.b.length;i++){
console.log(page.b[i]);
}
// 遍历对象，通常用in
for(var j in page.c){
console.log(page.c[j])
}
// 删除key
sessionStorage.removeItem('page');
总结与互动
读完上面的信息，你们应该都能轻松理解LocalStorage这个东西。它不仅仅帮我们存文件那么简单，还能让网页变得更好用。那我就问问大家，你们平时工作中有没有遇到要存用户数据的情况？都是怎么解决的？快来评论区聊聊，记得给文章点个赞，分享出去让更多人知道LocalStorage的好处！
var storage = window.localStorage;
if (!storage.getItem("pageLoadCount"))
storage.setItem("pageLoadCount",0);
storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//必须格式转换
document.getElementById("test").innerHTML = storage.pageLoadCount;
//showStorage();
评论0