客户端存储

客户端存储

cookie

cookie在每次客户端向服务器发送请求时都会被带上，在浏览器关闭时就会被删除

限制

不超过4k

cookie的组成

cookie在浏览器中是由以下参数构成: (这些参数在Set-Cookie头部中使用分号加空格隔开)

1. 名称 : 唯一标识cookie的名称。
   cookie名不区分大小写，因此myCookie和MyCookie是同一个名称。不过，实践中最好将cookie名当成区分大小写来对待，因为一些服务器软件可能这样对待它们。cookie名必须经过URL编码。

2. 值 : 存储在cookie里的字符串值。这个值必须经过URL编码。

3. 域(domain)

4. 路径

5. 过期时间 :表示何时删除cookie的时间戳

6. 安全标志(secure) : 设置之后，只在使用SSL安全连接的情况下才会把cookie发送到服务器。

注意 不要在cookie中存储重要或敏感的信息。cookie数据不是保存在安全的环境中，因此任何人都可能获得。应该避免把信用卡号或个人地址等信息保存在cookie中。

Web Storage

限制 每个源5MB
目的 :是解决通过客户端存储不需要频繁发送回服务器的数据时使用cookie的问题。

方法

1. clear()：删除所有值；不在Firefox中实现。
2. getItem(name)：取得给定name的值。
3. key(index)：取得给定数值位置的名称。
4. removeItem(name)：删除给定name的名/值对。
5. setItem(name, value)：设置给定name的值。
   示例

for (let i = 0, len = sessionStorage.length; i < len; i++){  
  let key = sessionStorage.key(i);  
  let value = sessionStorage.getItem(key);  
  alert(`${key}=`${value}`); 
} 

类型

localStorage 永久存储机制

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

sessionStorage 跨会话的存储机制 ----数据只会存储到浏览器关闭。

// 使用方法存储数据 
sessionStorage.setItem("name", "Nicholas");  
// 使用属性存储数据 
sessionStorage.book = "Professional JavaScript"; 
......

cookie、localStorage、sessionStorage异同对比

IndexedDB — 浏览器中存储结构化数据的一个方案

IndexedDB的设计几乎完全是异步的。为此，大多数操作以请求的形式执行，这些请求会异步执行，产生成功的结果或错误。绝大多数IndexedDB操作要求添加onerror和onsuccess事件处理程序来确定输出。

[详情参考] (https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API)

使用方式

1. 打开数据库。
2. 在数据库中创建一个对象仓库（object store）。
3. 启动一个事务，并发送一个请求来执行一些数据库操作，像增加或提取数据等。
4. 通过监听正确类型的 DOM 事件以等待操作完成。
5. 在操作结果上进行一些操作（可以在 request 对象中找到）