Web Storage、cookie和IndexedDB

Web应用可以使用浏览器API在用户计算机上本地存储数据，例如用户偏好、完成状态等。客户端存储是按照 来源 隔离的，因此来自一个站点的页面不能获取来自另一个站点的页面存储的数据。但来自同一站点的两个页面可以共享存储数据，也可以将其作为一种通信机制。
客户端存储主要包括Web Storage、Cookie、IndexedDB。

Web Storage

Window对象的localStorage和sessionStorage属性引用的是Storage对象，其属性值必须是字符串，具有持久化的特性。

使用示例

localStorage.getItem('bgcolor')
localStorage.setItem('bgcolor', 'white')
localStorage.removeItem('bgcolor')
localStorage.clear() //清空域名对应的整个存储对象

存储事件

Storage 对象发生变化时（即创建/更新/删除数据项时，重复设置相同的键值不会触发该事件，Storage.clear() 方法至多触发一次该事件），StorageEvent 事件会触发。在同一个页面内发生的改变不会起作用——在相同域名下的其他页面（如一个新标签或 iframe）发生的改变才会起作用。其他域名下的页面不能访问相同的 Storage 对象。

window.addEventListener('storage', function(e) {
   
  document.querySelector('.my-key').textContent = e.key;
  document.querySelector