早期只有一种浏览器存储方式，就是万维网早期，由网景公司设计，加入了 HTTP 1.0 的 Cookie。
HTTP5 的时代，一次性加入了三种 API，分别是 Web Storage，IndexedDB，Web SQL。

• Cookie：通过小型文本文件，在浏览器端存储一些字符类型 key-value 数据，支持设置一些属性。
• 有单个 Cookie 的大小限制，也有 Cookie 总数限制。这个因浏览器不同而不同（大小尽可能控制在 4KB 以内）。
• 每一次 HTTP 调用都会自动带上，发送给服务器端。
• Web Storage：可以存储大量字符类型的 key-value 数据。
• localStorage：没有时间限制。
• sessionStorage：会话结束时自动清除。
• IndexedDB：NoSQL 数据库，可以存储大量的结构化数据。API 相对复杂一丢丢
• 功能强大，甚至支持事务和索引。
• 异步 API。
• Web SQL：基于 SQL 的浏览器端数据库，后来被废弃。

Cookie

Set-Cookie: name=value; expires=Mon, 21 Oct 2019 07:28:00 GMT; path=/; domain=.example.com; secure; HttpOnly

• expires 过期时间，GMT 格式。如果不设置该属性，则 Cookie 的生命周期为当前会话，即关闭浏览器后 Cookie 就会被删除。
• path 路径，表示该 Cookie 归属于哪个路径。默认为当前页面的路径。
• domain 域名，表示该 Cookie 归属于哪个域名。默认为当前页面的域名。
• secure 只能通过 HTTPS 协议传输，不能通过 HTTP 协议传输。
• HttpOnly 只在网络传输时使用，不能通过 JavaScript 访问。

Web Storage

localStorage.setItem("key", "value");
var value = localStorage.getItem("key");

sessionStorage.setItem("key", "value");
var value = sessionStorage.getItem("key");

• setItem(key, value) 存储数据
• getItem(key) 读取数据
• removeItem(key) 删除数据
• clear() 清空数据 (删除所有的键值对)
• key(index) 获取键名 (根据索引获取对应的键名)

IndexedDB

没有研究过。

// 打开数据库
var request = indexedDB.open("myDatabase", 1);

// 创建对象仓库
request.onupgradeneeded = function (event) {
  var db = event.target.result;
  var objectStore = db.createObjectStore("users", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
  objectStore.createIndex("age", "age", { unique: false });
};

// 存储数据
request.onsuccess = function (event) {
  var db = event.target.result;
  var transaction = db.transaction(["users"], "readwrite");
  var objectStore = transaction.objectStore("users");
  var user = { id: 1, name: "张三", age: 20 };
  var request = objectStore.add(user);
  request.onsuccess = function (event) {
    console.log("数据存储成功");
  };
};

// 读取数据
request.onsuccess = function (event) {
  var db = event.target.result;
  var transaction = db.transaction(["users"], "readonly");
  var objectStore = transaction.objectStore("users");
  var index = objectStore.index("name");
  var request = index.get("张三");
  request.onsuccess = function (event) {
    var user = event.target.result;
    console.log(user);
  };
};