Web Storage简介
做网站，总得用上Web Storage，这玩意儿就像电脑硬盘里面的文件夹。那么怎么用？先来说本地存储（localStorage），它就是个大仓库，方便咱们存各种常用软件；再说说会话存储（sessionStorage），这货有点类似临时停车场，能暂时停放点东西。保存数据也是按咱熟悉的’键值对’方式。和老牌的Cookie相比，Web Storage有过之而无不及，能存最大5M的数据！以后上网就别带着那些臭烘烘的Cookie，页面开得多快还有个重要点儿，这个存储空间只能你自己去看，别人休想看到你藏着的小秘密，隐私保护棒棒哒！
localStorage与sessionStorage
哈喽各位，相信你们对Web Storage的两个大师—— localStorage 和 sessionStorage已经有所耳闻。首先说说localStorage这东西，就像个可以储物的小口袋，就算你把浏览器关了，数据还是不会消失，除非你亲自擦除或编写程序清除它。再看看sessionStorage，这个储存方式虽然短命，但用起来超方便，只要用setItem()、getItem()、clear()等简明的指令就可以存取数据。
数据存储与读取
想要存档数据咋办嘞？别急，咱要先把它变成JSON格式！这咋整么？简单得很呐，就用那个JSON.stringify(obj)函数就搞定！比如咱们要把一个叫obj={x:1,y:2}的玩意儿给存下来，只需这样滴： localStorage.obj = JSON.stringify(obj)，方便？读出来也不难，只需要用 var obj2=JSON.parse(localStorage.obj)这招儿即可。
数据枚举与遍历
如何查看手机里存的资料？超简单的，用上“key”和“length”这俩属性就行了！没错，就这么回事：一一查一遍值和键的对应情况。具体来说：
javascript
学会这招了吗？先把本地存储中的全部关键词整合成一份完整的名单！
如果本地存储中有的那就用呗。
这些数值挺简单的，但它们被存在了浏览器的本地存储器。
就是把"key":"value"连在一起，再打出来。
}
}
storage事件
亲们，知道为啥网页中的存储区（Web Storage）数据会随着浏览器窗口变化么？那是因为所有窗口都得喊个叫“storage”的口号才能传送信息~想了解更多？就看看这段代码：window.addEventListener(‘storage’，function(event){…});搞定后，你就可以在回调函数中找到那些重要的信息，比如关键词啦、旧值、新值还有网址啥的。
var serviceName="SERVICENAME",storage=null;
//通过load事件读取数据至本地变量
window.onload=function(){
try{
storage=JSON.parse(localStorage[serviceName] || '{}');
}catch{
storage={};
}
}
//通过onbeforeunload时间将数据写入localStorage
window.onbeforeunload=function(){
localStorage[serviceName]=JSON.stringify(storage)
}
命名空间管理
用命名空间储存家用品，这样就不怕找不到。每样东西都起个可爱的名字，像’serviceName’之类的，不易弄错，还能提升管理效率！
优化建议
咱们为了让网站运行更顺畅，就把localStorage里面的数据搬到本地一个变量那儿去以后访问数据直接瞄那个变量就能拿到。记得，每一页都要给自己独一无二的名字，别跟别人混淆了。注意一旦只在一个页面利用LocalStorage存储数据，那可就只会有storage事件哦；所以，你可得提前想个招儿应对数据更新或者其他标签页同步问题
只要学好Web Storage，前端储存和管理就能轻松驾驭！给大家分享几个小技巧以及你需要注意的事项。Web Storage用得顺手时，那么什么时候不能使用？想要了解更多前端开发秘诀，赶快去php中文网寻找答案吧～。
评论0