[FE] Web Storage

1. Web APIs

当使用JavaScript进行Web开发的时候，有很多API是可以使用的，例如，

Console
Document
History
Location
Navigator
Storage
WebSocket
Worker
XMLHttpRequest
...

可以在这里Web APIs找到详细列表。

2. Web Storage API

Web Storage API，让浏览器可以存储键值对（key/value pairs），
它比起cookie方式，使用起来更方便。

Web Storage API主要提供了两种方式：sessionStorage，localStorage。
它们具有以下性质：
（1）sessionStorage针对一个浏览器标签，分配存储区域。
新标签，新窗口，或者不同浏览器的标签，都会新建不同的存储区域。

（2）localStorage针对每一种浏览器，每一个域名，分配一个存储区域。
同种浏览器，同一个域名，即使不同的标签，不同的实例窗口，也会共享同一个存储区域。

3. Interface

> sessionStorage
  ↓Storage {length: 0}
    length: 0
    ↓__proto__: Storage
      →clear: function clear()
      →constructor: function Storage()
      →getItem: function getItem()
      →key: function key()
      length: (...)
      →removeItem: function removeItem()
      →setItem: function setItem()
      Symbol(Symbol.toStringTag): "Storage"
      →get length: function ()
      →__proto__: Object

在浏览器中输入sessionStorage（localStorage同理），可以看到，
sessionStorage是Storage对象的实例，即，

> sessionStorage instanceof Storage
true

而Storage对象，包含clear, getItem, key, removeItem, setItem多种方法。

3.1 Properties

（1）length
返回Storage实例中，所存储的键值对个数。

3.2 Methods

（1）key(n)
返回Storage实例中，第n个键所对应的值。

（2）getItem(name)
返回Storage实例中，与键名name相对应的值。

（3）setItem(name, value)
将键值对name/value加入Storage实例中，或者更新键名为name的值。

（4）removeItem(name)
从Storage实例中，删除键名为name的键值对，返回undefined。

（5）clear()
清空Storage实例中的所有键值对。

4. Using the Web Storage API

sessionStorage和localStorage中保存的是键值对，
像普通的Object对象一样，键和值，默认都是字符串，
如果不是字符串，就会进行自动转换。

我们除了可以使用setItem和getItem方法来进行键值对操作，
还可以像普通Object对象一样，使用.号进行操作。
例如，以下三种方式是等价的，

sessionStorage.a = 1;
sessionStorage['a'] = 1;
sessionStorage.setItem('a', 1);    // 推荐

5. StorageEvent

window.addEventListener('storage', e=>{
    this    // -> window
});

以上我们为当前页面注册了一个StorageEvent。

其中，e包含如下这些常用属性，

key
newValue
oldValue
storageArea
url

（1）key
用来表示改变了的键名，
如果该值为null，则表示此改变是由clear方法触发的。

（2）newValue
针对某个键，所设置的新值。
如果该值为null，则表示此改变是由clear方法触发的，或者，
对应的键值对被删除了。

（3）oldValue
针对某个键，被修改之前的值。
如果该值为null，则表示此改变是由clear方法触发的，
（因为此时key为null不能标记具体的key，所以oldValue只能是null）
或者，新增了一个曾经不存在的键。

（4）storageArea
被改变的那个Storage对象。

（5）url
改变的Storage对象所处的那个页面url。

注：
这里的null不会造成歧义，
如果localStorage.setItem('a', null)，
则会自动将值null转为字符串"null"。

另外值得注意的是，
（1）当前页面对Storage进行改变，并不会触发这个事件，
（2）在注册之前，打开过的页面中，对Storage进行改变也不会触发事件，
（3）其他标签页中的sessionStorage改变，不会触发事件。

我们可以通过window.removeEventListener('storage', handler)来删除事件监听器，
其中，handler是必须要传入的。

---

参考

Web APIs
Web Storage API
Storage
Using the Web Storage API
StorageEvent