Web 存储允许我们在浏览器里保存简单的 key/value 数据。与 Cookie 相比,Web 存储方式更直观、存储空间更大(一般不超过 5MB);
实现 Web 存储的浏览器,在 window 对象上包含两个属性:
1. localStorage
localStorage API 示例:
示例1:用 localStorage 储存应用状态;
代码分析:
不仅如此
Web 存储还有个好玩的特性
存储事件
无论什么时候存储在 localStorage 或 sessionStorage 的数据发生变化,浏览器都会在【其他】对该数据可见的窗口对象上触发存储事件(但是,在对数据进行改变的窗口对象上是不会触发的)。
示例2:storage 存储事件
代码分析:
图:在 Chrome 控制台中观察 localStorage
2. sessionStorage
sessionStorage 的工作方式和 localStorage 很接近,不同之处在于储存数据的有效期与作用域;
示例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 权威指南》