如何利用 navigator.locks 解决多标签页同时写入 localStorage 的竞态冲突

如何利用 navigator.locks 解决多标签页同时写入 localStorage 的竞态冲突需要先看清适用场景和关键步骤，避免只记结论却忽略实际限制。

navigator.locks 不能解决 localStorage 的竞态冲突，因其为异步锁机制，而 localStorage 是同步阻塞 API，无事务支持，锁无法干预已立即执行的 setItem 操作。

直接说结论：navigator.locks 不能解决 localStorage 的竞态冲突，因为它是设计来协调跨标签页的异步操作的，而 localStorage 是同步阻塞 API，且不支持锁机制——你调用 localStorage.setItem 的瞬间就已写入，锁根本来不及介入。

为什么 navigator.locks 对 localStorage 写入无效

很多人误以为加个锁就能“串行化” localStorage 操作，但问题出在执行模型上：

1. localStorage 所有方法（setItem、getItem、removeItem）都是同步的，且浏览器对每个源（origin）维护一个独立的存储实例；不同标签页之间不共享内存，只共享磁盘/索引数据库层面的数据，但无原子事务或版本控制
2. navigator.locks.request 是 Promise-based 异步 API，它只能包裹异步逻辑（比如 fetch、IndexedDB 操作），无法阻塞或延迟同步的 localStorage.setItem
3. 即使你在 lock 回调里调用 localStorage.setItem，多个标签页仍可能在极短时间内先后进入回调并执行写入——因为锁释放后下一轮请求立刻获得，没有排队等待的语义保障（除非显式用队列管理）

真实可行的替代方案：用 IndexedDB + locks 做原子读-改-写

如果你需要多标签页协同更新同一份结构化数据（比如计数器、用户偏好快照），必须放弃 localStorage，改用支持事务和异步的 IndexedDB，再配合 navigator.locks 防止并发覆盖：

1. 用 IndexedDB 存储核心状态（如 store.put({key: 'theme', value: 'dark'})），它天然支持事务（transaction(..., 'readwrite')）保证单次操作原子性
2. navigator.locks.request('user-preferences', async lock => { ... }) 用于协调「读取当前值 → 计算新值 → 写回」这一整段逻辑，避免两个标签页同时读到旧值然后各自覆盖
3. 注意：锁名必须全局一致（如 'user-preferences'），且锁作用域是 origin 级别，所有同源 tab 共享

const updateCounter = async (delta) => {  return navigator.locks.request('counter-lock', async () => {    const db = await openDB(); // 自定义打开 IndexedDB 的函数    const tx = db.transaction('state', 'readwrite');    const store = tx.objectStore('state');    const current = await store.get('counter') || { value: 0 };    await store.put({ key: 'counter', value: current.value + delta });    await tx.done;  });};

如果非要用 localStorage，只能妥协做“最终一致”处理

没有锁能救 localStorage，但可以降低冲突概率或让冲突更可预测：

1. 避免“读-改-写”模式：不要 let v = JSON.parse(localStorage.getItem('x')); v.a++; localStorage.setItem('x', JSON.stringify(v)) —— 这是竞态高发区
2. 改用幂等写入：比如记录时间戳或版本号，每次写入带 timestamp，读取时只接受最新版本（需额外逻辑比对）
3. 监听 storage 事件做被动同步：一个 tab 写入后，其他 tab 收到事件并重新拉取完整状态，但无法解决“同时写”的丢失问题
4. 简单场景可用 localStorage.setItem('x', Date.now() + '|' + JSON.stringify(data))，靠时间戳选优，不过仍不是强一致

真正麻烦的地方不在锁怎么写，而在于很多人没意识到：只要还在用 localStorage 做跨 tab 协同状态管理，就已经站在了错误抽象层上。锁只是工具，不是创可贴。