如何利用 Web Locks API 在并发环境下实现对本地存储资源的原子化独占访问-js教程-PHP中文网

web locks api 需配合 indexeddb 实现逻辑独占访问：锁名须含业务唯一标识且 url-safe，显式声明 exclusive 模式并 await 事务完成；safari 不支持时需 ifavailable 降级与服务端幂等兜底；锁内仅执行最小必要存储操作。

如何利用 web locks api 在并发环境下实现对本地存储资源的原子化独占访问

Web Locks API 不能直接“原子化”本地存储资源，但它能配合 IndexedDB 等沙箱存储机制，在多标签页、Worker 等并发场景下实现逻辑上的独占访问——关键在于把读-改-写全过程包裹在排他锁内，并依赖底层存储自身的事务语义。

锁名必须带业务唯一标识

锁的作用域由名称决定。用固定名（如 'cart' 或 'draft'）会导致所有用户或所有文档互相阻塞。

✅ 正确：用业务主键构造锁名，例如 `user-cart-${userId}`、`note-${docId}`
✅ 锁名需 URL-safe：避免空格、斜杠、控制字符；长度建议 ≤64 字符
❌ 错误：navigator.locks.request('draft', cb) —— 所有草稿共用一把锁，失去并发意义

必须显式声明 exclusive 模式并 await 事务完成

默认 mode 是 'exclusive'，但旧版 Chrome 曾静默 fallback 到 'shared'，导致锁形同虚设。且锁释放时机取决于回调是否返回 Promise，不 await 事务结束会提前释放锁。

✅ 显式写：{ mode: 'exclusive' }
✅ 写操作中必须 await IndexedDB 事务完成：await tx.done，不能只调 tx.objectStore().put()

✅ 示例结构：

await navigator.locks.request(`note-${id}`, { mode: 'exclusive' }, async () => {
  const db = await openDB();
  const tx = db.transaction('notes', 'readwrite');
  const store = tx.objectStore('notes');
  const old = await store.get(id);
  await store.put({ ...old, updatedAt: Date.now() });
  await tx.done; // 关键：确保写入真正落盘再释放锁
});