Web Storage网络存储

HTML5的Web Storage网络存储是指网络应用程序用于在网络浏览器存储方法和通讯协议，支持持久数据存储，类似于Cookie，以及window-local存储。网络存储又分为localStorage本地存储和sessionStorage会话存储。

localStorage 本地存储

localStorage用于持久化的本地存储，除非主动删除数据，否则数据永远不会过期。

sessionStorage 会话存储

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一会话中的页面才能访问，并且会话结束后数据便被销毁。因此其仅是会话级别的存储，并非持久化的本地存储。

存储容量限制

浏览器对于存储数据的大小有限制，限制的大小普遍在5M/域，超出则会报Uncaught QuotaExceededError错误（如下方）。因此在开发时应注意控制存储数据保持在限制大小内，并定时清除无用的数据。若要手动删除数据，Chrome浏览器可至chrome://settings/cookies 查看不同网站已使用本地存储的占用空间情况，并进行删除操作。

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 当存储数据大小超过限制时，会报以下错误：</span>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// `YourStorageKey` 指报错时存放数据的键值</span>
Uncaught QuotaExceededError: Failed to set the <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'YourStorageKey'</span> property on <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Storage'</span>: Setting the value of <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'YourStorageKey'</span> exceeded the quota.</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

这个网站专门统计收集并统计访问者使用的浏览器对本地存储空间限制，目前似乎只存储了Android和Chrome浏览器的数据，详情请看：http://dev-test.nemikor.com/web-storage/support-test/

文章参考：

• 维基百科
• Web Storage API

本文链接：http://blog.csdn.net/u012347225/article/details/51488571