本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是 Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能数据以 键/值 对存在, web 网页的数据只允许该网页访问使用。

Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
Cookie 可以存储 4kb。
JavaScript 中，创建 cookie 如下所示：

1
document.cookie = "username=John Doe";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

1
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

1
2
document.cookie =
  "username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

web 存储

客户端存储数据的两个对象为：

  • localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
  • sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

localStorage 对象

1
2
3
4
localStorage.getItem(key); //获取
localStorage.setItem(key, value); //添加
localStorage.removeItem(key); //删除
localStorage.clear(); //删除全部

sessionStorage 对象

1
2
3
4
sessionStorage.getItem(key); //获取
sessionStorage.setItem(key, value); //添加
sessionStorage.removeItem(key); //删除
sessionStorage.clear(); //删除全部

indexDB

随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。
通俗地讲，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

操作步骤

  • 创建/打开数据库。
  • 在数据库中创建一个对象仓库（object store）。
  • 启动一个事务，并发送一个请求来执行一些数据库操作，像增加或提取数据等。
  • 通过监听正确类型的 DOM 事件以等待操作完成。
  • 在操作结果上进行一些操作（可以在 request 对象中找到）

打开数据库

1
2
3
4
5
6
7
8
9
10
11
var db = null;
var request = window.indexedDB.open("MyTestDatabase");
request.onerror = function (event) {
  // 错误处理
  console.log(" 打开数据库报错");
};
request.onsuccess = function (event) {
  // 成功处理
  db = event.target.result;
  console.log("打开数据库成功");
};

创建和更新数据库版本号

1
2
3
4
var db = null;
request.onupgradeneeded = function (event) {
  db = event.target.result;
};

新建数据库

新建数据库与打开数据库是同一个操作。如果指定的数据库不存在，就会新建。不同之处在于，后续的操作主要在 upgradeneeded 事件的监听函数里面完成，因为这时版本从无到有，所以会触发这个事件。
通常，新建数据库以后，第一件事是新建对象仓库（即新建表）。

1
2
3
4
5
6
7
8
9
request.onupgradeneeded = function (event) {
  db = event.target.result;
  var objectStore = null;
  if (!db.objectStoreNames.contains("imgLists")) {
    objectStore = db.createObjectStore("imgLists", { keyPath: "id" });
    // unique name可能会重复
    objectStore.createIndex("name", "name", { unique: false });
  }
};

写入数据

新增数据指的是向对象仓库写入数据记录。这需要通过事务完成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// new 一个blob对象
var obj1 = { hello: "world" };
var blob = new Blob([JSON.stringify(obj1, null, 2)], {
  type: "application/json",
});

function add() {
  var request = db
    .transaction(["imgLists"], "readwrite")
    .objectStore("imgLists")
    .add({ id: 1, name: "图片1", path: "/static/image", blob: blob });

  request.onsuccess = function (event) {
    console.log("数据写入成功");
  };

  request.onerror = function (event) {
    console.log("数据写入失败");
  };
}

查询数据

查询数据也是通过事物完成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function read() {
  var transaction = db.transaction(["imgLists"]);
  var objectStore = transaction.objectStore("imgLists");
  // 用户读取数据，参数是主键
  var request = objectStore.get(1);

  request.onerror = function (event) {
    console.log("事务失败");
  };

  request.onsuccess = function (event) {
    if (request.result) {
      console.log(request.result);
    } else {
      console.log("未获得数据记录");
    }
  };
}

遍历数据

遍历数据表格的所有记录，要使用指针对象 IDBCursor。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function readAll() {
  var objectStore = db.transaction("imgLists").objectStore("imgLists");

  objectStore.openCursor().onsuccess = function (event) {
    var cursor = event.target.result;

    if (cursor) {
      console.log(cursor);
      cursor.continue();
    } else {
      console.log("没有更多数据了！");
    }
  };
}

更新数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function update() {
  var request = db
    .transaction(["imgLists"], "readwrite")
    .objectStore("imgLists")
    // 主动更新主键为1
    .put({ id: 1, name: "图片2", path: "/static/image2" });

  request.onsuccess = function (event) {
    console.log("数据更新成功");
  };

  request.onerror = function (event) {
    console.log("数据更新失败");
  };
}

删除数据

1
2
3
4
5
6
7
8
9
10
11
12
function remove() {
  var request = db
    .transaction(["imgLists"], "readwrite")
    .objectStore("imgLists")
    .delete(1);

  request.onsuccess = function (event) {
    console.log("数据删除成功");
  };
}

remove();

创建/使用索引

索引的意义在于，可以让你搜索任意字段，也就是说从任意字段拿到数据记录。如果不建立索引，默认只能搜索主键（即从主键取值）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// objectStore.createIndex('name', 'name', { unique: false });
function findIndex() {
  var transaction = db.transaction(["imgLists"], "readonly");
  var store = transaction.objectStore("imgLists");
  var index = store.index("name");
  var request = index.get("图片1");

  request.onsuccess = function (e) {
    var result = e.target.result;
    if (result) {
      console.log(result);
    } else {
      // ...
    }
  };
}

使用场景

indexDB 是一个浏览器使用简易的数据库。随着前端功能复杂度提升，用户需要多元化，前端 indexDB 应用也就越来越多。桌面应用、Progressive Web App（PWA）、chrome 扩展组件的开发等。用户同时会获取/操作更多的信息，怎么留存这些大量的数据，那么我们的 indexDB 就上线了。案例：DevDocs，electron 开发的桌面应用（图片传输）。