1. Cookie

1. 限制

cookie是与特定域绑定的。设置cookie后，它会与请求一起发送到创建它的域。这个限制能保证cookie中存储的信息只对被认可的接收者开放，不被其他域访问。

因为cookie存储在客户端机器上，所以为保证它不会被恶意利用，浏览器会施加限制。同时，cookie也不会占用太多磁盘空间。

只要遵守以下大致的限制，就不会在任何浏览器中碰到问题：

不超过 300 个cookie
每个cookie不超过 4096 字节
每个域不超过 20 个cookie
每个域不超过 81920 字节

如果cookie总数超过了单个域的上限，浏览器就会删除之前设置的cookie。

2. 构成

cookie在浏览器中是由以下参数构成的：

名称

cookie名称不区分大小写。必须经过URL编码。
值

必须经过URL编码。
域

cookie有效的域。
路径

请求URL中包含这个路径才会把cookie发送到服务器。
过期时间

默认情况下，浏览器会话结束后会删除所有cookie。不过，也可以设置删除cookie的时间。把过期时间设置为过去的时间会立即删除cookie。
安全标志

设置之后，只在使用SSL安全连接的情况下才会把cookie发送到服务器。

但是，域、路径、过期时间和安全标志用于告诉浏览器什么情况下应该在请求中包含cookie。这些参数并不会随请求发送给服务器，实际发送的只有cookie的名称、值。

3. 子 cookie

为绕过浏览器对每个域cookie数的限制，有些开发者提出了子cookie的概念。

子cookie是使用cookie的值在单个cookie中存储多个名/值对。

4. 注意事项

因为所有cookie都会作为请求头部由浏览器发送给服务器，所以在cookie中保存大量信息可能会影响特定域浏览器请求的性能。保存的cookie越大，请求完成的时间就越长。

另外，不要在cookie中存储重要或敏感的信息。

2. Web Storage

1. Web Storage 简介

Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用cookie的问题。

Web Storage 的第 2 版定义了两个对象：localStorage和sessionStorage。localStorage是永久存储机制，sessionStorage是跨会话的存储机制。

这两者的主要区别是：

sessionStorage对象只存储会话数据，这意味着数据只会存储到浏览器关闭。存储在sessionStorage中的数据不受页面刷新影响，可以在浏览器崩溃并重启后恢复。
存储在localStorage中的数据会保留到通过 JavaScript 删除或者用户清除浏览器缓存。localStorage数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览器而丢失。

	sessionStorage	localStorage
存储时效	浏览器关闭后清除	永久存储，直到手动清除
刷新页面数据是否丢失	否	否

2. sessionStorage

存储在sessionStorage对象中的数据只能由最初存储数据的页面使用，在多页应用程序中的用处有限。

常用方法

（1）存储数据

// 使用方法
sessionStorage.setItem('name', 'Jack');
// 使用属性
sessionStorage.age = '18';

（2）获取数据

// 使用方法
const name = sessionStorage.getItem('name');
// 使用属性
const age = sessionStorage.age;
console.log(name, age); // Jack 18

（3）取得给定数值位置的名称

const key = sessionStorage.key(0);
console.log(key); // name

得到的是键值对中的键。

（4）删除

sessionStorage.removeItem('name'); // 删除名称为name的数据
delete sessionStorage.name; // 用delete删除
sessionStorage.clear(); // 清空所有数据

（4）遍历

sessionStorage.setItem('name', 'Jack');
sessionStorage.age = '18';
sessionStorage.weight = '60';

const res = [];
for (let i = 0; i < sessionStorage.length; i++) {
    // 先通过key()取得名称
    const key = sessionStorage.key(i);
    // 再通过名称遍历sessionStorage
    const val = sessionStorage.getItem(key);
    res.push(val);
}
console.log(res); // ["Jack", "18", "60"]

3. localStorage

要访问同一个localStorage对象，页面必须来自同一个域（子域不可以）、在相同的端口上使用相同的协议。

相关方法与sessionStorage相同：

存数据

localStorage.setItem(key, value)
取数据

localStorage.getItem(key)
取得名称

localStorage.key(index)
删除

localStorage.removeItem(key)

localStorage.clear()

4. 存储事件

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

这个事件的事件对象有如下 4 个属性：

domain：存储变化对应的域
key：被设置或删除的键
newValue：键被设置的新值，若键被删除则为null
oldValue：键变化之前的值

5. 限制

不同浏览器给localStorage和sessionStorage设置了不同的空间限制，但大多数会限制为每个源5MB。

sessionStorage和localStorage类型只能存储字符串。非字符串数据在存储之前会自动转换为字符串。同样，获得数据时，只能得到字符串。

想要获取对象时，可以使用JSON.parse()方法将字符串转化为对象格式：

JSON.parse(localStorage.getItem('xxxxx')).content.email;

客户端存储：Cookie和Storage｜8月更文挑战