LocalStorage、Cookie、IndexedDB 同步与异步机制对比

#一、LocalStorage —— 同步

#特性

LocalStorage 的 API 是同步的。调用 localStorage.setItem()、getItem()、removeItem()、clear() 会立即执行并阻塞主线程。

#示例

复制console.log(1);
localStorage.setItem('key', 'value'); // 阻塞执行
console.log(2);
// 输出顺序一定是：1 -> 2

#备注

少量读写通常很快；在大量循环写入场景中可能导致 UI 卡顿。

#二、Cookie —— 同步

#特性

通过 document.cookie 读写是同步的，操作会立即生效。

#示例

复制document.cookie = "token=abc; path=/; max-age=3600";
console.log(document.cookie); // 立刻可以读到新值

#备注

Cookie 的读写是同步的；但它随 HTTP 请求发送到服务器的过程属于网络传输，不阻塞当前 JS 执行。

#三、IndexedDB —— 异步

#特性

IndexedDB 是浏览器内置的异步数据库，适合存储大量结构化数据（对象、JSON、Blob 等）。打开数据库、事务与 CRUD 均为异步。

#示例

复制const request = indexedDB.open('myDB', 1);

request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction('users', 'readwrite');
  const store = tx.objectStore('users');
  const addReq = store.add({ id: 1, name: 'hua' });

  addReq.onsuccess = () => console.log('数据已写入');
};

console.log('代码继续执行，不会阻塞');

#对比总结表（GFM 表格）

#补充说明

• SessionStorage 与 LocalStorage 一样，也是同步的，但作用域是同源同标签页会话。
• 需要非阻塞的大量读写，优先考虑 IndexedDB；仅存放少量状态或 token，LocalStorage 即可；需要让后端自动识别身份时，更适合使用 Cookie。