Cookies、localStorage、sessionStorage、IndexedDB 的概念、区别、典型场景，以及操作语法示例全融合在一起，方便你一边理解一边学习实操。

---

📦 浏览器存储方案详解 + 语法示例

---

1. Cookies

🧾 概念

• 小文本，浏览器存储，自动随请求发送
• 体积小（约4KB），用于身份验证、会话管理

🛠️ 常用操作示例（JS）

// 设置 cookie，设置7天过期
document.cookie = "username=Logan; max-age=" + 7*24*60*60 + "; path=/";

// 读取 cookie
console.log(document.cookie); // "username=Logan; other=val"

// 删除 cookie（设置过期时间为过去时间）
document.cookie = "username=; max-age=0; path=/";

注意：Cookies 是字符串格式，需要自己手动解析。

---

2. localStorage

🧾 概念

• 同源永久存储，5\~10MB
• 只能存字符串，需要 JSON 序列化复杂数据

🛠️ 常用操作示例

// 写入
localStorage.setItem("theme", "dark");
localStorage.setItem("user", JSON.stringify({name: "Logan", age: 30}));

// 读取
console.log(localStorage.getItem("theme")); // "dark"
console.log(JSON.parse(localStorage.getItem("user"))); // {name: "Logan", age: 30}

// 删除
localStorage.removeItem("theme");

// 清空所有
localStorage.clear();

---

3. sessionStorage

🧾 概念

• 同 localStorage，但只在当前标签页/窗口存活
• 关闭标签页自动清除

🛠️ 常用操作示例

// 写入
sessionStorage.setItem("tempData", "12345");

// 读取
console.log(sessionStorage.getItem("tempData"));

// 删除
sessionStorage.removeItem("tempData");

// 清空所有
sessionStorage.clear();

---

4. IndexedDB

🧾 概念

• 浏览器内置数据库，存储大量结构化数据
• 异步 API，支持事务、索引，存储对象、文件

🛠️ 简单操作示例

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

request.onerror = function(event) {
  console.error("数据库打开失败");
};

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  // 创建对象仓库（表）
  db.createObjectStore("users", { keyPath: "id" });
};

request.onsuccess = function(event) {
  const db = event.target.result;

  // 开启事务，操作对象仓库
  const transaction = db.transaction("users", "readwrite");
  const store = transaction.objectStore("users");

  // 添加数据
  store.add({id: 1, name: "Logan"});

  transaction.oncomplete = function() {
    console.log("数据添加成功");
  };

  transaction.onerror = function() {
    console.error("事务失败");
  };
};

---

🆚 存储区别总结（带操作属性）

存储类型	生命周期	体积大小	读写方式	是否随请求发送	存储内容类型	典型用途
Cookies	自定义（默认会话）	\~4KB	同步（字符串）	是	字符串	登录态、会话识别
localStorage	永久	5\~10MB	同步（字符串）	否	字符串（支持JSON）	用户偏好设置、本地缓存
sessionStorage	当前标签页	5\~10MB	同步（字符串）	否	字符串	临时会话数据
IndexedDB	永久	几百MB+	异步（对象）	否	结构化数据、文件	大量数据存储、离线应用

---

💡 使用建议

• 认证相关用 Cookies，让服务器识别用户
• 配置、缓存用 localStorage，数据量小且持久
• 临时页面数据用 sessionStorage，关闭即失效
• 复杂数据、离线数据用 IndexedDB