先来讲讲localStorage！这个就是浏览器里的小助手，帮我们网页上存点儿东西。就像个小仓库似的，就算换台电脑再开网站，数据还在那儿。但别忘了，并不是所有浏览器都支持，特别是那些旧版的可能不行。而且，它只认字符串，要是想存JSON对象，可得先转换成字符串才能放进去哟。
localStorage的基本概念
本地存储是啥嘞？就指你浏览器里那个能存东东的地儿！跟个迷你数据库似的，就算关掉浏览器再开也不会消失。
首先得记着，LocalStorage只能存储字符串那想要存进JSON对象咋办捏？简单，我们自带的JSON.stringify()大招就能搞定！先用这招儿将JSON对象变回字符串，然后就能妥妥地放进去了。要用时，再用JSON.parse()方法把它还原回去就成~
本地存储和会话存储有啥不一样？
LOCAL和SESSION这俩货色都是浏览器送的礼物，虽然都是存储东西的，但还是有些差别。LOCAL比较牢靠，不管浏览器开关机，它里头的东西都会保留着。但是SESSION就没那么稳当了，只要浏览器关掉了或者会话超时了，存储的内容也就消失无踪了。
举个例子来说如果你把网上看到的一些有趣内容保存在本地存储里面（就是那个叫LocalStorage的），那即使你关掉了浏览器再打开，这些信息还是会在的但是，如果你是用的SessionStorage的话，那就得重新输入，因为当你关掉网页的时候，它就会自动清空所有数据！
localStorage的隐私模式
别忘了，开了浏览器隐私模式就没法儿看localStorage了哈。也就是说，你要是这么上网，然后还往localsStorage存东西，那等你关掉浏览器，这些信息可就都没了。
这对于重视保护用户隐私的网站来说可是个大事儿你想，如果使用隐私模式浏览网页的话，那些网站储存的本地存储（就是那个localStorage）就没法访问，说不定某些功能都不能好好运作了。
if(！window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
//主逻辑业务
}
localStorage的存储限制
本地存储空间只有5MB大，要是网页塞满，那它就跑不起来！
就像咱们在网上收藏了很多图片，这样网页会超慢，甚至崩溃！所以，大家要用localStorage时记得别弄太多东西，免得出岔子。
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"]);
}
储存本地数据就用三大法子呗：用setItem()这个方法、直接给它数值（就是赋值）或者用JSON.stringify()。这几个招式各有利弊，你要看你实际需求挑哪个哦～
通常是使用setItem()这个方法，方便又简单，但是需要自己手动更换数据类型！或者也可以直接传入一个值，不过还是得手工转换下型别。有个办法是用JSON.stringify()这个方法，帮忙自动转换数据类型，虽然可能复杂点。
localStorage的读取方法
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);
}
让我来告诉你怎么玩儿本地存储！其实很简单的，有三种方法可以用：第一是用getItem()这个小工具；第二是直接看一眼；最后一个就是用JSON.parse()。
捞起来用getItem()也行，就是得自己转化下数据类型；直接读的话方便点，不过该转换的还得自己动手；用JSON.parse()就省心多了，它会帮你自动转换，就是稍微麻烦点。
localStorage的删除方法
这LocalStorage里头，其实就两招能把数据给清了，那就是removeItem()跟clear()。不过，这俩方法各有优缺点，具体怎么选还得看你自己咯。
用removeItem()这个方法，就可以随手把想要的数据给搞定，就是得先了解一下你要删除的那个东西在不在这堆数据里面。要是想一次性全部清除，那就用clear()，效果立竿见影，但是用的时候可别手抖！
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);
}
localStorage的实际应用
说个本地存储（localStorage）的用处，它能给网页开发带来很多便捷。比如说，你可以用它来储存用户登录信息，这样下次再来就不用重新输入了。而且，还能用来记住用户的个性化设置，比如字体大小啊、颜色什么的，下次他们再来就能看到自己喜欢的页面！
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);
就是说，咱们可以用localStorage存些小东西，比如上次填写的信息，或者搜索过的内容啥的。这样以后再做类似的事就方便了不少，直接从这儿找之前的数据就行，省事儿又高效呀~
localStorage的注意事项
记住几个事儿在使用LocalStorage时。首先，只能储存字符串，要是你想存JSON对象可得动脑筋；其次，隐私模式下是没法读取Storage的，你得搞定怎么保护用户隐私才行啊；最后，虽然空间不小，但也别塞太满了。
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);
比如网页里图片多了，它们就会占用本地缓存空间，导致页面打开变慢。
localStorage的未来发展
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
跟着前端技术的不断发展，localStorage这个家伙真的变得越来越厉害了！比如，未来它还可能支持各种数据类型，包括数组和对象。还有就是，储存空间据说也要扩大，那就意味着可以放更多的东西
localStorage用起来真的很爽，前端处理数据变得超级简单！尽管现在有那么点小麻烦，有点小瑕疵，但是科技总归是要进步的，这些问题以后一定会解决的~
评论0