客户端状态主要依靠追踪浏览器的用户身份及其相关数据。

  1. cookie 的大小被限制在 4KB。
  2. cookie 会随着 HTTP 事务一起发送，因此会浪费一小部分带宽。
  3. 要操作 cookie 比较麻烦。
  4. cookie 通过 name=value 的形式存储。
  5. 一般默认是服务器生成，可以设置失效时间。可以在浏览器生成，默认关闭失效。

Cookies 主要被应用于三种目的：

  • 会话管理

    登陆，购物车，游戏分数或其他服务器应该记住的东西

  • 个性化

    用户偏好、主题和其他设置

  • 追踪

    记录和分析用户习惯

创建 Cookies

服务器能够发送一个或多个 Set-Cookie 首部的响应。浏览器通常会存储这些 cookie 然后通过 http 首部的 cookie 字段发送给相同的服务。

Set-Cookie: <cookie-name>=<cookie-value>

Cookie 除了 Name 和 Value 还有一些额外的属性值。

  • Expires / Max-Age：session 在当前会话结束之后删除，也可以指定具体时长。
  • HttpOnly：设置该属性，Document.cookie API 将无法访问 cookie，该 cookie 仅作用于服务器。设置该属性可以防止 XSS。
  • Domain：指定了接受 cookie 的主机。默认为当前域名。
  • Path：指定了 URL 路径，该路径必须存在请求中。
  • SameSite：允许服务器指定是否/何时通过跨站请求发送。对应的值有：Strict、Lax和None。

cookie 主要是服务器生成使用的，客户端虽然可以通过 document.cookie 取得该值，并进行修改，但一般设置 HttpOnly 限制客户端修改。

WebStorage

WebStorage 可以分为 sessionStorage 和 localStorage。

WebStorage 一般都是客户端生成使用的，且不随 HTTP 首部发送给服务器。所以安全性相对于 cookie 来说比较高一些，不用担心拦截。

sessionStorage

  1. 数据保存在客户端 session 对象中。
  2. 临时保存，仅在当前会话中有效，在同一个窗口中刷新或者进入另一个同源页面，也依旧存在。但是关闭浏览器窗口或者独立打开新页面都会不一样。
  3. 只能存储字符串类型。

localStorage

  1. 数据保存在客户端本地硬件设备中。
  2. 永久保存，关闭浏览器或者打开新的页面也一样存在。
  3. 只能存储字符串类型。

用法

WebStorage 存储的的是键值对，类似对象，但是键和值都是字符串。可以通过以下方式设置 WebStorage

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

更加推荐使用 WebStorage API（setItem, getItem, removeItem, key, length）来操作相应的对象。

IndexedDB

当数据量不大时，我们可以通过SessionStorage或者LocalStorage来进行存储，但是当数据量较大，或符合一定的规范时，我们可以使用数据库来进行数据的存储。

在浏览器提供的数据库中，共有web sql 和 IndexedDB 两种。HTML5已经废弃的web sql, 在 chromiun 还有使用。

备注： IndexedDB API 是强大的，但对于简单的情况可能看起来太复杂。如果你更喜欢一个简单的 API，请尝试 localForage、dexie.js、PouchDB、idb、idb-keyval、JsStore 或者 lovefield 之类的库，这些库使 IndexedDB 对开发者来说更加友好。

参考链接