小伙伴们，我要教你们一个牛逼的网页前端小窍门：就是用localStorage。这个功能差不多就等于你电脑里的一个特大号箱子，最多可以存5MB的数据，而且对网络速度没啥影响！不过，你得要用上高级点儿的浏览器才行！跟着我，咱们来瞧瞧它到底有多少魔力！
localStorage是个啥？
这不就是浏览器里小巧玲珑的书签吗？喜欢啥直接标上！关了机重启还在，特方便的说！但记得要用IE8或者更新的浏览器
localStorage的类型限制
儿安生的本地存储有点笨拙，只能处理字符串。这样的话，你扔个超长的JSON进去也得先转成字符串才行。听起来和我们买了东西要自己包装再放回冰箱是不是很像？虽然费事了点，但还是可以接受~
隐私模式下的localStorage
哈喽，告诉你个好玩的事儿，为啥隐私模式还不让保存东西？就像你把自己关在小屋子里，一拉抽屉，啥都消失了，就放心了呗。不过也别大意，保不准儿哪天被人看见你藏着啥。
localStorage的内存消耗
if(！window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
//主逻辑业务
}
本地Storage就是你家的杂物柜，堆得满满当当就很难找东西对？说起上网，页面加载速度也会像打了个瞌睡似得慢下来。所以别贪心，让它清清爽爽才能飞起来！
这个问题超简单！想知道sessionStorage和localStorage有什么不同吗？
if(！window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.a=1;
//写入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
}
说到大家都知道的本地存储（localStorage）和它的兄弟会话存储（sessionStorage），有没有人觉得有点眼熟？没错，它们长得有点像，但作用可大不相同。localStorage这个大仓库能存好久，但是sessionStorage这个临时小仓库只能用一次，用完就消失了。那么问题来了，哪个更适合你？答案其实取决于你的具体需求！
localStorage的浏览器支持情况
哎呦咱就别纠结IE那个破烂浏览器了，它连localStorage也不能用，只能瞎折腾UserData。可是咱们不是早就开始玩儿HTML5和CSS3这种高大上的东西了吗？那就别纠缠这些旧毛病了呗。当然，紧跟时代才最棒！
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.a=1;
//写入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
//第一种方法读取
var a=storage.a;
console.log(a);
//第二种方法读取
var b=storage["b"];
console.log(b);
//第三种方法读取
var c=storage.getItem("c");
console.log(c);
}
如何使用localStorage
搞定浏览器的存储其实挺容易滴，先试试能用不哈？接着就可以开始存东西！别忘了，要用localStorage的写入功能。但是要注意，存进去的只能是字符串之类的。
localStorage的读取
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.b=1;
//写入c字段
storage.setItem("c",3);
console.log(storage.a);
// console.log(typeof storage["a"]);
// console.log(typeof storage["b"]);
// console.log(typeof storage["c"]);
/*分割线*/
storage.a=4;
console.log(storage.a);
}
读取本地存储？简单，用getItem和setItem这两招就行了，跟打开抽屉存取物品似的！不过别忘了，存进去的都是JSON格式的数据，这时你得先使用JSON.parse把它转换成JSON对象，这样才能开始操作！
总结与提问
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);
好了，时间差不多了。你们中有谁尝过本地存储Storage？虽然头几次用可能会让你头疼，但是等上手后，再上网上冲浪就比以前快多了！有没有什么实用小技巧想分享一下？别忘了点赞
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);
评论0