随着··· ···，废话就不多铺垫了，直接进入主题吧。浏览器有存储数据的需求，这两天查了下相关文档，重点学习了下。以谷歌浏览器 F12 调出控制台，主要有 Cookie、Local Storage、Session Storage、IndexedDB、Web SQL 几种方案，下面逐一简单说下。

Cookie

最早用于 HTTP 状态管理机制，Cookie 通常在 Web 应用程序中用于识别用户及其身份验证的会话，兼容性好。Cookie 是一段不超过 4KB 的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成。客户端发起请求时请求头会附带 Cookie 信息，过多的 Cookie 设置会影响请求效率。

常用方法：

  • document.cookie;
  • document.cookie = ‘key=value’;

Cookie 的原生 API 不友好，需要自行封装一下。Vue 推荐使用 vue-cookies 插件：

  • import Vue from ‘vue’
  • import VueCookies from ‘vue-cookies’
  • Vue.use(VueCookies)
  • $cookies.config(expireTimes, path)
  • $cookies.set(key, value[, expireTimes[, path[, domain[, secure]]]])
  • $cookies.get(key)
  • $cookies.remove(key [, path [, domain]])
  • $cookies.isKey(key)
  • $cookies.keys()

参考文档：

Web Storage

传统的 Cookie 方式存储数据有诸多限制（数量、大小），然而随着 Web 应用的发展，客户端存储的需求越来越多，为此 HTML5 提出了 Web Storage 的解决方案， Web Storage 包含 Local Storage 及 Session Storage 两种存储机制。

Local Storage

Local Storage 永久保留数据，直至手动清除。每个数据源的最大限制为5 MB。

常用方法：

  • localStorage.length
  • localStorage.setItem(keyName, keyValue);
  • localStorage.getItem(keyName);
  • localStorage.removeItem(keyName);
  • localStorage.key(index);
  • localStorage.clear();
Session Storage

Session Storage 浏览器关闭，结束当前会话后自动清除。每个数据源的最大限制为5 MB。

常用方法：

  • sessionStorage.length
  • sessionStorage.setItem(keyName, keyValue);
  • sessionStorage.getItem(keyName);
  • sessionStorage.removeItem(keyName);
  • sessionStorage.key(index);
  • sessionStorage.clear();

参考文档：

IndexedDB

IndexedDB 类似浏览器的本地数据库，允许储存大量数据，提供查找接口，还能建立索引。

常用方法：

  • indexedDB.open(databaseName, version);  打开指定版本的数据库
  • IDBEnvironment：提供对IndexedDB功能的访问。它由window和worker对象实现。该接口不是2.0规范的一部分。
  • IDBFactory：提供对数据库的访问。这是由全局对象实现的接口indexedDB ，因此是API的入口点。
  • IDBOpenDBRequest：表示打开数据库的请求。
  • IDBDatabase：表示与数据库的连接。这是在数据库上进行事务处理的唯一方法。
  • IDBTransaction：代表交易。您在数据库上创建事务，指定范围（例如要访问的对象存储），并确定所需的访问类型（只读或读写）。
  • IDBRequest：通用接口，用于处理数据库请求并提供对结果的访问。
  • IDBObjectStore：表示一个对象存储，该对象存储允许访问通过主键查找的IndexedDB数据库中的一组数据。
  • IDBIndex：还允许访问IndexedDB数据库中的数据子集，但使用索引来检索记录而不是主键。有时这比使用快IDBObjectStore。
  • IDBCursor：遍历对象存储和索引。
  • IDBCursorWithValue：遍历对象存储和索引，并返回游标的当前值。
  • IDBKeyRange：定义键范围，该键范围可用于从特定范围的数据库中检索数据。

参考文档：

Web SQL

Beware. This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further.

这是··· ···，弃坑了。

参考文档：