cookie、Web Storage

1. cookie

cookie是客户端与服务器端进行会话时使用的一个能够在浏览器本地化存储的技术

1.1 cookie的限制

• 与特定域绑定，不被其他域访问，保证它不会被恶意利用
• 存储大小有限制，每个cookie不超过4kb（超出静默删除）
• 存储数量有限制，不同浏览器不同限制数量（一般每个域不超过50个在任何浏览器就能兼容；Safari和Chrome没有硬性限制）

1.2 cookie的构成

• 名称：唯一标识cookie的名称。不区分大小写，但为了兼容一些服务器软件最好保持区分大小写不同名。
• 值：存储在cookie里的字符串值。
• 域：cookie有效的域。发送到这个域的所有请求都会包含对应的cookie。
• 路径：请求URL中包含这个路径才会把cookie发送到服务器。
• 过期时间：表示何时删除cookie的时间戳。GMT格式。
• 安全标识：设置之后，只有使用SSL安全连接（https）的情况下才会把cookie发送到服务器。

1.3 JavaScript中的cookie

• 增
  • BOM的document.cookie返回包含页面中所有有效的cookie的字符串（根据域、路径、过期时间和安全设置）；
  • 所有名和值都是URL编码，需要使用decodeURIComponent()解码；
  • 通过document.cookie可以设置新的cookie字符串，不会覆盖之前的cookie，除非设置的是已有的cookie
  • 设置cookie时只有cookie名和值是必须的

document.cookie = `${name}=${value};${expires}=${expiration_time};${path}=${domain_path};${domain}=${domain_name};${secure};`

• 读取
  通过保存格式去解析document.cookie返回的字符串
• 删除
  只需要把cookie的过期时间设为过去就能自动删除

1.4 子cookie

子cookie是在单个cookie存储的小块数据，本质上是使用cookie的值在单个cookie中存储多个键值对，来绕过浏览器对每个域cookie数的限制。
如：

name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5&name6=value6

1.5 使用cookie的注意事项

• 有一种HTTP-only的cookie可以在浏览器和服务器上设置，但只能在服务器上读取，js无法取得这种cookie的值
• 所有cookie都会作为请求头部由浏览器发送给服务器，所以cookie越大，请求完成的时间越长，需要考虑性能问题
• cookie不是保存在安全的环境中的，不要在cookie中保存敏感信息

2. Web Storage

Web Storage提供在cookie之外的存储会话数据的途径，提供跨会话持久化存储大量数据的机制。分为localStorage永久存储机制对象和sessionStorage跨会话存储机制对象。

2.1 Storage类型

Storage类型用于保存名/值对数据，存储上限有浏览器决定。方法：

• clear()：删除所有值；不在firefox中实现。
• getItem(name)：取得给定name的值。
• key(index)：取得给定位置的名称（不是值）。
• removeItem(name)：删除给定name的名/值对。
• setItem(name， value)：设置给定name的值。

Storage只能保存字符串类型，非字符串类型会自动转为字符串，在存取时要注意数据类型变化。

2.2 sessionStorage对象

• sessionStorage对象只存储会话数据，浏览器关闭时数据就会清掉。
• 因为sessionStorage对象与服务器会话紧密相关，所以在运行本地文件时不能使用。
• 现代浏览器用同步阻塞的方式存储数据；老版IE用异步的方式实现数据写入，会导致给数值赋值的时间和数据写入磁盘的时间存在延迟（少量数据时可以忽略不计），在IE8中可以在数据赋值前调用begin()、之后调用commit()方法来强制坚数据写入磁盘。

2.3 localStorage对象

• 要访问同一个localStorage对象，页面必须来自用一个域（子域不可）、在相同的端口上使用相同的协议
• 存储在localStorage中的数据会保留到通过js删除或用户清空浏览器缓存。不会因为页面刷新、关闭窗口、标签页或重启浏览器而丢失。

2.4 存储事件

当Storage对象发生变化时（不区分sessionStorage和localStorage），都会在文档上触发storage事件。这个时间对象有以下4个属性：

• domain：存储变化对应的域
• key：被设置或删除的值
• newValue：键被设置的心智，若键被删除则为null
• oldValue：键变化之前的值
  可以用以下代码监听到：

window.addEventListener("storage",(event) => console.log(event)
)

2.5 限制

• 客户端数据的大小限制是按照每个源（协议、域、端口）来设置的，因此每个源有固定大小的数据存储空间。
• 不同浏览器给localStorage和sessionStorage设置了不用的空间限制，但大多是会限制为每个源5MB