啥是WebStorage呀？简单来说，这就是HTML5新推出的存东西功能，比cookie强太多！主要分为两大类：sessionStorage和localStorage。前者好比快餐，用完了就没了；后者则相当于你家的冰箱，不清理的话就能永久保存。
这些存储方式虽然看起来有点麻烦，但实际操作起来soeasy！API简单明了，功能强大，不管你是存取数据，还是删除某些数据，统统不在话下。记住这几招就好啦：用localStorage.setItem（key，value）把数据存下来，用localStorage.getItem（key）就能轻松读出来；想删掉什么数据？没问题，用localsStorage.removeItem（key）立刻解决；如果要彻底清空存储，只需用一句localStorage.clear（）就搞定。不过得注意这些API只支持字符串类型的数据，所以key和value都得是字符串才行。
实战应用：通讯录小程序
试试呗！试试这个超赞的通讯录小程序！不但可以加好友，找谁、看他们资料什么的也超方便。最厉害的是，它还有个localStorage功能帮你记下来这些联系方式~
首先得弄个HTML网站，把所有这些人和电话都放上去，再加个“提交”按钮方便保存信息。然后，就以电话号码为关键字，联系人资料为值，放进本地存储就好！
快来体验我们新的小功能，找电话号码？只需要简单输进去，按个搜索就行了！当地的数据仓库立马帮你捞出那个人的全部信息，明明白白地展示在网页上。
哥们儿，做好！我们得找个地儿看保存过的联系方式！用JavaScript瞅瞅本地存储里有哪些Key，然后和信息配对一下，不就能看到所有东西了吗？
WebStorage的使用注意事项
听说你觉得WebStorage很厉害？记住两点！放进去的只能是字符型的东西。如果麻烦的话，就把那些对象和数组变成字符串。另外，虽然存储空间不小，但也别太贪心，网站最多用到五六兆就足够咯～
哎呦千万别忘了安全可是挺重要滴。你晓得，咱们只把资料保存在本地，就算退出浏览器页面它们还在~不过，如果是重要消息方面的话，那就得多加小心了最好还是先加密保存，才会真正放心呀。
咋选好用的sessionStorage跟本地存储？
选存储方式，主要看需求！比如买东西这种小数据，SessionStorage就够啦；但要是保存长期重要资料，像是个人喜好之类的，LocalStorage最合适，能帮你妥妥地保存好几年！
WebStorage与Cookie的比较
那WebStorage和Cookie哪个厉害？虽然它们都可以放点儿数据，但WebStorage明显赢在容量上了，足足有5MB！而Cookie才只有可怜的4KB。而且用起来WebStorage也更简单，API一目了然，比Cookie省事儿多了。Cookie还得操心那个烦人的HTTP头部问题。
Cookie和网页存储都有各自的好与坏！Cookie可以从服务器读取数据，网页存储就不行了哟选择哪种方式？这要看你到底想要什么功能
WebStorage在实际项目中的应用
大家在搞项目时，常常用到WebStorage这个好东东，它能存好多信息，比如用户登录状态啦、喜好，还有暂时不用的数据啥的。合理利用这个功能，不仅让用户感觉很舒服，每次打开网页的速度也会变快，更有助于提升整个应用程序的流畅度！
H5本地存储之WebStorage篇
姓名：
手机：
输入手机号：
评论0