浏览器API：webStorage

cookie

在webStorage出现之前在浏览器端存储数据通常使用cookie。cookie是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。

客户端根据服务器端的set-cookie保存状态，客户端再往服务器发送请求时，客户端会自动在请求报文中加入cookie值发送出去，服务器端发现客户端发送过来的cookie后，会去检查究竟从哪一个客户端发送来的请求，然后对比服务器上的记录，最后得到之前的状态信息。

但是使用cookie存储数据存在一些限制：

• cookie是与特定域绑定的，cookie中的信息只对被认可的接收者访问，不能被其他域访问
• 浏览器中存储的cookie不能超过300个
• 每个cookie存储的数据大小不能超过4kb
  如果cookie总数超过了单个域的上限，浏览器就会删除之前设置的cookie，不同的浏览器cookie的限制也不相同。为了增强浏览器端存储数据的能力，W3C在HTML5中添加了webStorage规范。

webStorage的出现

webStorage是HTML提出的一个用于浏览器端存储数据的规范。

webStorage提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式。
WebStorage的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用cookie的问题。

WebStorage 提供了两个对象localStorage和sessionStorage，这两种浏览器存储API提供了在浏览器中不受页面刷新影响而存储数据的两种方式。

localStorage

localStorage是客户端持久存储数据的机制。要访问同一个localStorage对象，页面必须来自同一个域（子域不可以）、在相同的端口上使用相同的协议。

sessionStorage

sessionStorage对象只存储会话数据，这意味着数据只会存储到浏览器关闭。这跟浏览器关闭时会消失的会话cookie类似。存储在sessionStorage中的数据不受页面刷新影响，可以在浏览器崩溃并重启后恢复。

localStorage和sessionStorage都是Storage的实例对象，因此具有相同的方法：

方法名	描述
setItem(key,value)	设置指定key和value
getItem(key)	获取指定key的值
removeItem(key)	删除指定key的值
clear()	清空storage
key(index)	根据数据存储的索引获取对应的键名

sessionStorage和localStorage的区别

localStorage提供的是一种永久的存储方式，浏览器关闭之后localStorage的数据仍然存在

sessionStorage提供的是一种本次会话的存储，浏览器关闭之后sessionStorage数据会被删除

webStorage的限制

与其他客户端数据存储方案一样，WebStorage也有限制。具体的限制取决于特定的浏览器。
不同浏览器给localStorage和sessionStorage设置了不同的空间限制，但大多数会限制为每个源5MB。

存储事件

每当Storage对象发生变化时，都会在文档上触发storage事件。使用属性或setItem()设置值、使用delete或removeItem()删除值，以及每次调用clear()时都会触发这个事件。

在同一个页面内发生的改变不会起作用——在相同域名下的其他页面（如一个新标签或 iframe）发生的改变才会起作用。
我们可以这样监听storageEvent：

window.addEventListener('storage',(e) => {
	console.log(e);
});

对于sessionStorage和localStorage上的任何更改都会触发storage事件，但storage事件不会区分这两者。