Web|Web Storage WebStorage

cookie 为浏览器提供了存储数据的方案，但该方案有如下缺点：

存储空间有限，只有 4KB；随着网页存储浏览器的数据量增加，这点存储空间捉襟见肘。
浏览器发起请求时，都会携带符合要求的 cookie 数据；与接口无关的数据存储在 cookie 中，会增加每次请求的载荷。
cookie 初衷为存储用户的身份标识，存储其他数据，则与设置初衷背离。

为了解决 cookie 在浏览器存储数据方面的缺陷，HTML5 带来了 Web Storage 方案。
Web Storage 方案定义了两个存储对象：localStorage 和 sessionStorage。localStorage 是永久存储机制，sessionStorage 是跨会话的存储机制。
Storage 类型 localStorage 和 sessionStorage 对象都是 Storage 构造函数的实例，都具有相同的操作属性和方法。这些方法都是同步方法，即存储任务执行完毕之后才继续执行之后的代码。
setItem
存储键/值对；如果键存在，则覆盖值。

class Storage { setItem(key: string, value: string): void }

getItem
按照键返回对应值；如果键对应的值存在，则返回对应的值，否则返回null。

class Storage { getItem(key: string): string | null }

removeItem
删除键以及对应的值。

class Storage { removeItem(key: string): void }

clear
删除所有的数据。

class Storage { clear(): void }

key
获取该索引下的键名；获取不到键名时，返回null。

class Storage { key(index: number): string | null }

length
获取存储键值对的数量。

class Storage { length: number }

sessionStorage sessionStorage 对象存储的数据，只存在于当前标签页，其他相同 URL 的标签页无法共享 sessionStorage 数据。
当前标签页刷新时，sessionStorage 数据仍然保留，但关闭当前标签页之后 sessionStorage 数据将会删除。

tips: 同一个标签页下符合同源要求的 iframe 页面之间的 sessionStorage 数据是可以共享的。试试看

localStorage

符合同源要求的所有页面都可以共享 localStorage 数据。
数据不会过期，浏览器重启之后数据仍然存在。

storage 事件

window.addEventListener ('storage', event => { })

当localStorage或sessionStorage中的数据更新后，storage事件就会触发，它具有以下属性：

key —— 发生更改的数据的 key（如果调用的是 .clear() 方法，则为 null）。
oldValue —— 旧值（如果是新增数据，则为 null）。
newValue —— 新值（如果是删除数据，则为 null）。
url —— 发生数据更新的文档的 url。
storageArea —— 发生数据更新的 localStorage 或 sessionStorage 对象。

tips: 该事件会在所有可以访问存储对象的 window 对象上触发（导致当前存储数据改变的 window 对象除外）。

同源定义如果两个 URL 的协议、域名、端口都相同，则这两个 URL 是同源。
【Web|Web Storage】下表给出了与 URL http://store.company.com/dir/... 的源进行对比的示例:

URL	结果	原因
http://store.company.com/dir2...	同源	只有路径不一样
http://store.company.com/dir/...	同源	只有路径不一样
https://store.company.com/sec...	失败	协议不同
http://store.company.com:81/d...	失败	端口不同（http 默认端口是 80）
http://news.company.com/dir/o...	失败	域名不一样