Web存储（Web Storage）

Web 存储允许我们在浏览器里保存简单的 key/value 数据。与 Cookie 相比，Web 存储方式更直观、存储空间更大（一般不超过 5MB）；

实现 Web 存储的浏览器，在 window 对象上包含两个属性：

• localStorage
• sessionStorage

1. localStorage

• localStorage 存储的数据是永久性的，除非通过 JavaScript 删除或者用户清除浏览器缓存，否则数据将一直保留在用户的电脑上，永不过期；
• localStorage 的作用域受同源策略限制（协议、主机名、端口），同源的文档间共享同样的localStorage数据；
• localStorage 的作用域也受浏览器厂商限制，Chrome 与 Firefox 中的 localStorage 无法共享；
• localStorage 中只能存储字符串!!!!
• 支持 storage 存储事件；

localStorage API 示例：

示例1：用 localStorage 储存应用状态；

代码分析：

不仅如此

Web 存储还有个好玩的特性

存储事件

无论什么时候存储在 localStorage 或 sessionStorage 的数据发生变化，浏览器都会在【其他】对该数据可见的窗口对象上触发存储事件（但是，在对数据进行改变的窗口对象上是不会触发的）。

示例2：storage 存储事件

代码分析：

图：在 Chrome 控制台中观察 localStorage

2. sessionStorage

sessionStorage 的工作方式和 localStorage 很接近，不同之处在于储存数据的有效期与作用域；

• 不是永久性存储，会在浏览器（或选项卡）被关闭时销毁（注：浏览器（或选项卡）刷新时，不会引起 sessionStorage 销毁）；
• sessionStorage 的作用域不仅受同源策略限制，而且还被限定在浏览器顶层窗口中；（即：同源的文档渲染在浏览器不同的标签页中，它们之间不共享sessionStorage数据）； （即：如果一个浏览器标签页包含两个 <iframe> 元素，它们所包含的文档是同源的，那么这两者之间共享 sessionStorage 数据）；

示例3：sessionStorage 存储应用状态；

代码分析：

参考：

https://caniuse.com/#search=WebStorage https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API http://dev-test.nemikor.com/web-storage/support-test/ 《JavaScript 权威指南》 《JavaScript 高级程序设计》 《HTML5 权威指南》