javascript七基础学习系列一千四百二十七：localStorage 对象

在修订的HTML5 规范里，localStorage 对象取代了globalStorage，作为在客户端持久存储
数据的机制。要访问同一个localStorage 对象，页面必须来自同一个域（子域不可以）、在相同的端
口上使用相同的协议。
因为localStorage 是Storage 的实例，所以可以像使用sessionStorage 一样使用
localStorage。比如下面这几个例子：
// 使用方法存储数据
localStorage.setItem(“name”, “Nicholas”);
// 使用属性存储数据
localStorage.book = “Professional JavaScript”;
// 使用方法取得数据
let name = localStorage.getItem(“name”);
// 使用属性取得数据
let book = localStorage.book;
两种存储方法的区别在于，存储在localStorage 中的数据会保留到通过JavaScript 删除或者用户
清除浏览器缓存。localStorage 数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览
器而丢失。
存储事件
每当Storage 对象发生变化时，都会在文档上触发storage 事件。使用属性或setItem()设置
值、使用delete 或removeItem()删除值，以及每次调用clear()时都会触发这个事件。这个事件的
事件对象有如下4 个属性。
 domain：存储变化对应的域。
 key：被设置或删除的键。
 newValue：键被设置的新值，若键被删除则为null。
 oldValue：键变化之前的值。
可以使用如下代码监听storage 事件：
window.addEventListener(“storage”,
(event) => alert(‘Storage changed for ${event.domain}’));
对于sessionStorage 和localStorage 上的任何更改都会触发storage 事件，但storage 事
件不会区分这两者。
限制
与其他客户端数据存储方案一样，Web Storage 也有限制。具体的限制取决于特定的浏览器。一般
来说，客户端数据的大小限制是按照每个源（协议、域和端口）来设置的，因此每个源有固定大小的数
据存储空间。分析存储数据的页面的源可以加强这一限制。
不同浏览器给localStorage 和sessionStorage 设置了不同的空间限制，但大多数会限制为每
个源5MB。关于每种媒介的新配额限制信息表，可以参考web.dev 网站上的文章“Storage for the Web”。
要了解关于Web Storage 限制的更多信息，可以参考dev-test.nemikor 网站的“Web Storage Support
Test”页面。