Web 数据存储

介绍：

在HTML5之前，本地存储的唯一方案是使用cookie，cookie也有不好的一面，那就是处理过期数据，而且要跟着请求来来回回的发送和接收这些没用的数据。
HTML5新增本地存储功能，在访客的计算机上保存数据，这些数据可以无限期的保存在用户计算机上，不会发送到服务器。web存储（Web Storage）特别适合开发离线应用。

web存储分为：

1. 本地存储，对应localStorage对象，用于长期保存网站的数据，并且站内任何页面都可以访问该数据。
2. 会话存储，对应sessionStorage对象，用于临时保存针对一个窗口(或标签页)的数据。在访客关闭窗口或标签页之前，这些数据是存在的，而关闭之后就会被浏览器删除。

存储范围：

无论本地存储还是会话存储，都是与网站所在的域联系在一起的。 你用不同的用户名登录自己的计算机，或者使用不同的浏览器，那么存取的也将是不同的本地存储数据。
尽管HTML5没有硬性规定存储空间的上限，但大多数浏览器都把本地存储限制为5MB以下。

没有Web服务器则不能使用Web存储：在很多浏览器中，只有从Web服务器上打开的页面能读写 Web 存储。无论这个Web服务器是远程的还是本地的-关键就是不能从本地硬盘打开页面。

通过localStorage和 sessionStorage保存数据时，该数据会自动被转换为文本字符串。

兼容性：

如果需要兼容IE7，可以用cookie来模拟Web存储。虽然不完美，但却可行。

数据处理

localStorage.setItem(keyName, data)  // 保存数据

localStorage.getItem(keyName)  // 读取数据
localStorage.keyName
localStorage[keyName]

localStorage.removeItem(keyName)  // 删除数据
sessionStorage.clear()  // 清空会话数据
复制代码

响应存储变化

本地存储或会话存储发生变化时，其他查看同一页面或者同一站点中其他页面的 口就会触发window.onStorage事件。

window.addEventListener("storage", func, false);
复制代码

转载于:https://juejin.im/post/5a8e3a0c5188257a84624525