存储技术

cookie

特点

• cookie 遵循同源策略
• 一个浏览器能创建的 cookie 数量最多为 300 个，并且每个不能超过 4KB，每个 Web 站点能设置的 Cookie 总数不能超过 20 个
• 过期时间之前一直有效

发送步骤

• 客户端发送一个请求到服务器端
• 服务器端发送一个响应到客户端，其中包含 Set-Cookie 头部
• 客户端发送一个请求到服务器端，其中包含 Cookie 头部
• 服务器端发送一个响应到客户端

使用场景

• 会话状态管理（如用户登录状态、购物车）
• 个性化设置（如用户自定义设置）
• 浏览器行为跟踪（如跟踪分析用户行为）
• cookie 标示用户身份储存在用户本地的数据（通常经过加密）

安全

数据泄露问题（记住密码）

会话 cookie

不设置时间关闭浏览器窗口，cookie 就会消失

session

请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session标识（称为session id），如果已包含服务器就按照session id把这个session检索出来使用，如果客户端请求不包含session id，则为客户端创建一个session并且生成一个与此session相关联的session id，这个session id将被在本次响应中返回给客户端保存。保存这个session id的方式可以采用cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器

localStorage

在所有同源窗口中都是共享的

事件

通过 StorageEvent 响应存储的变化

创建/更新/删除数据项，重复设置相同的键值不会触发该事件

window.addEventListener('storage', function(e) {
  console.log(e);
  // key	该属性代表被修改的键值
  // newValue 修改后的新值
  // oldValue 修改前的原值
  // storageArea 被操作的 storage 对象
  // url	发生改变的对象所在文档的 URL 地址
});

sessionStorage

• 只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享

• 使用场景

  表单页面拆分成多个子页面，然后按步骤引导用户填写

  存储用户数据，路由跳转更改数据，减少调用接口的次数，减轻服务器压力

indexDB

特点

• 不是关系型数据库，键值对储存
• 异步。 LocalStorage 操作是同步的
• 支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况
• 同源限制 IndexedDB 受到同源限制
• 储存空间大 不少于 250MB，甚至没有上限
• 支持二进制储存。可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）

使用场景

3D WebGL 渲染

离线缓存 - Web 应用清单

Web 应用程序清单在一个 JSON 文本文件中提供有关应用程序的信息（如名称，作者，图标和描述）。manifest 的目的是将 Web 应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。

Web 应用程序清单是被称为渐进式 Web 应用程序 (PWA)的 Web 技术集合的一部分，它们是可以安装到设备的主屏幕的网络应用程序，而不需要用户通过应用商店，伴随着其他功能，比如离线可用和接收推送通知。

需求

• Web App 中一部分资源并不是经常改变
• 设备终端位置不再固定网络的可靠性变得降低
• 为阅读而生的页面

Cache Manifest

在 minifest 文件中定义那些需要缓存的文件，支持 manifest 的浏览器，会将按照 manifest 文件的规则，像文件保存在本地，从而在没有网络链接的情况下，也能访问页面

特点

• 离线浏览: 用户可以在离线状态下浏览网站内容
• 更快的速度: 因为数据被存储在本地，所以速度会更快
• 减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源

更新

• 更新 manifest 文件

  版本号，时间戳、md5

• 通过 javascript 操作

  window.applicationCache.update()

• 清除浏览器缓存

注意事项

• 浏览器对缓存数据的容量限制可能不太一样
• 如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存
• 引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下
• 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源
• 站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问
• 当 manifest 文件发生改变时，资源请求本身也会触发更新