TOC

浏览器端存储

早期只有一种浏览器存储方式,就是万维网早期,由网景公司设计,加入了 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);
  };
};