webStorage

由于cookie存储大小被限制在了4kb, 并且在发起网络请求时会默认带上cookie，导致请求数据变大。为了摆脱这些限制，提供一个更加方便简洁了方式对存储进行管理，html5规范里增加了两个API:

• localstorge
• sessionstorage

这两个接口将存储限制放宽到5mb，为本地的存储提供了极大的便利性。

这两个接口的区别主要是在客户端存留的时间，对于sessionStorage, 当会话关闭后便立即清空了。但是对于localStorage，如果你不主动去删除的话，它是一直存在于磁盘，而且对于同域下的页面都可以相互访问。

webStorage对数据的操作是很友好的，封装了setItem, getItem, removeItem, clear, key这几个接口来对数据进行存取和删除。

用途探讨

webStorage的用途很广，能针对性的对客户端的体验进行优化，记录过往数据，甚至可以存储一些html片段、css片段、js片段等来加速浏览器页面的展示。但是想通过缓存脚本的方式来提高页面速度是否可行需要进行实验对比。因为浏览器已经帮你做过缓存了。接下来来探讨几种用法。

用途一： 在storage存储了js。

假设JS在页面的生效的时间T，那么

T = T1(LS 读数据) + T2(执行JS的时间)

由于storage中读取的是字符串，所以需要将字符串转换成可执行代码的话一般通过eval或者Function来构造。这两种方法都是容易有安全问题和效率问题的。而且还有对过期时间进行设置，并且需要有更新方案。所以总体来讲这种方案的性价比不高。

用途二： 在storage存储应用数据。 比如你在开发一款IM及时聊天工具。对于两个人的聊天数据是不会变的。发出去的消息不会随着时间而改变内容。那么如果你将聊天数据存储到webStorage, 那么在刷新或者关闭IM并重新启动时，你的数据可以优先从存储中拿，然后再去服务器中获取，这样能明显优化体验。但是里面涉及的细节非常多，很难控制（别问为什么我知道🙄）