Cookie、sessionStorage、localStorage、IndexedDB介绍

一、Cookie

1. 概念

Cookie 是一种存储在用户浏览器中的小型数据片段，通常用于跟踪用户会话、用户偏好设置等。服务器可以通过 HTTP 响应设置 Cookie，并在后续的请求中读取它们。

2. 相关属性

• name=value：键值对，存储实际数据。
• Domain：指定 Cookie 所属的域名。
• Path：指定 Cookie 有效的路径。
• Expires/Max-Age：指定 Cookie 的过期时间。
• Secure：仅通过 HTTPS 传输 Cookie。
• HttpOnly：防止 JavaScript 访问 Cookie，增强安全性（一定程度防御跨站脚本攻击）。
• SameSite：控制 Cookie 的跨站请求行为（一定程度防御跨站请求伪造攻击）。

3. 特性

• 存储容量有限：通常每个域名最多存储 20 个 Cookie，每个 Cookie 最大 4KB。
• 自动发送：浏览器会在每次 HTTP 请求中自动发送与当前域名和路径匹配的 Cookie。
• 安全性 ：可以通过 HttpOnly 和 Secure 标志增强安全性。

4. 使用示例

设置 Cookie

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
document.cookie = "age=30; path=/";

读取 Cookie

console.log(document.cookie); // "username=John Doe; age=30"

删除 Cookie

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/";

二、sessionStorage

1. 概念

sessionStorage 是一种存储机制，用于在浏览器会话期间存储数据。数据在浏览器关闭后丢失。

2. 相关属性

• sessionStorage.setItem(key, value) ：存储数据。
• sessionStorage.getItem(key) ：获取数据。
• sessionStorage.removeItem(key) ：删除数据。
• sessionStorage.clear() ：清空所有数据。

3. 特性

• 存储容量有限：通常为 5MB。
• 临时存储：数据在浏览器关闭后丢失。
• 同步操作：操作是同步的，可能会阻塞主线程。

4. 使用示例

存储数据

sessionStorage.setItem("username", "John Doe");

读取数据

console.log(sessionStorage.getItem("username")); // "John Doe"

删除数据

sessionStorage.removeItem("username");

清空所有数据

sessionStorage.clear();

三、localStorage

1. 概念

localStorage 是一种存储机制，用于在浏览器中持久化存储数据。数据在浏览器关闭后仍然保留，直到被显式删除。

2. 相关属性

• localStorage.setItem(key, value) ：存储数据。
• localStorage.getItem(key) ：获取数据。
• localStorage.removeItem(key) ：删除数据。
• localStorage.clear() ：清空所有数据。

3. 特性

• 存储容量有限：通常为 5MB。
• 持久化存储：长期有效，数据在浏览器关闭后仍然保留。
• 同步操作：操作是同步的，可能会阻塞主线程。

4. 使用示例

存储数据

localStorage.setItem("username", "John Doe");

读取数据

console.log(localStorage.getItem("username")); // "John Doe"

删除数据

localStorage.removeItem("username");

清空所有数据

localStorage.clear();

四、IndexedDB

1. 概念

IndexedDB 是一种运行在浏览器中的非关系型数据库，用于存储大量结构化数据。它支持事务操作，可以保证数据的一致性和完整性。

2. 相关属性

• indexedDB.open(name, version) ：打开数据库。
• IDBDatabase：数据库对象。
• IDBTransaction：事务对象。
• IDBObjectStore：对象存储空间。
• IDBIndex：索引。

3. 特性

• 存储容量大：通常受限于浏览器的存储限制（通常为几十MB到几百MB）。
• 支持事务：支持事务操作，可以保证数据的一致性和完整性。
• 异步操作：操作是异步的，不会阻塞主线程。
• 结构化存储：支持复杂的数据结构和索引。

4. 使用示例

打开数据库

const request = indexedDB.open("myDatabase", 1);
​
request.onerror = function(event) {
  console.error("Database error:", event.target.error);
};
​
request.onsuccess = function(event) {
  const db = event.target.result;
  console.log("Database opened successfully:", db);
};
​
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore("users", { keyPath: "id" });
  objectStore.createIndex("username", "username", { unique: true });
};

添加数据

const request = indexedDB.open("myDatabase", 1);
​
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(["users"], "readwrite");
  const objectStore = transaction.objectStore("users");
  const addRequest = objectStore.add({ id: 1, username: "John Doe" });
​
  addRequest.onsuccess = function() {
    console.log("Data added successfully");
  };
​
  transaction.oncomplete = function() {
    console.log("Transaction completed");
    db.close();
  };
};

查询数据

const request = indexedDB.open("myDatabase", 1);
​
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(["users"], "readonly");
  const objectStore = transaction.objectStore("users");
  const getRequest = objectStore.get(1);
​
  getRequest.onsuccess = function(event) {
    console.log("Data retrieved:", event.target.result);
  };
​
  transaction.oncomplete = function() {
    console.log("Transaction completed");
    db.close();
  };
};

删除数据

const request = indexedDB.open("myDatabase", 1);
​
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(["users"], "readwrite");
  const objectStore = transaction.objectStore("users");
  const deleteRequest = objectStore.delete(1);
​
  deleteRequest.onsuccess = function() {
    console.log("Data deleted successfully");
  };
​
  transaction.oncomplete = function() {
    console.log("Transaction completed");
    db.close();
  };
};

五、总结

• Cookie：用于存储少量数据，通常用于跟踪用户会话和偏好设置。数据会自动发送到服务器。
• sessionStorage：用于存储会话级别的数据，数据在浏览器关闭后丢失。
• localStorage：用于存储持久化数据，数据在浏览器关闭后仍然保留。
• IndexedDB：用于存储大量结构化数据，支持事务操作和复杂的数据结构。