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

• Cookie：通过小型文本文件，在浏览器端存储一些字符类型 key-value 数据，支持设置一些属性。
  1. 有单个 Cookie 的大小限制，也有 Cookie 总数限制。这个因浏览器不同而不同（大小尽可能控制在 4KB 以内）。
  2. 每一次 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);
  };
};