如何通过悲观锁 / 乐观锁机制（基于 storage 事件与时间戳）解决跨标签页存储并发冲突-js教程-PHP中文网

localStorage无法并发控制，因其无原子性、无CAS机制、读写间存在竞态窗口；需用时间戳乐观锁（读多写少）或锁标记悲观锁模拟（写关键低频），辅以storage事件同步状态。

如何通过悲观锁 / 乐观锁机制（基于 storage 事件与时间戳）解决跨标签页存储并发冲突

跨标签页场景下的存储并发冲突，本质是多个浏览器标签页（即多个独立 JavaScript 执行上下文）同时读写同一份本地存储（如 localStorage），而 localStorage 本身不提供原子性、无锁机制、无事务支持，导致“读—改—写”过程极易出现覆盖或丢失更新。单纯依赖 storage 事件只能通知变更，无法协调写入顺序。真正可行的解法，是将“悲观锁”与“乐观锁”的思想迁移到前端存储层，结合时间戳作为版本依据，并用 storage 事件辅助状态同步。

为什么不能直接用 localStorage 做并发控制？

localStorage.setItem(key, value) 是覆盖式写入，没有 compare-and-set（CAS）能力；getItem 和 setItem 之间存在竞态窗口；storage 事件只在其他标签页触发写入后才派发，当前标签页无法感知自己是否“已过期”。这意味着：两个标签页几乎同时读取到旧值 → 各自计算新值 → 先后调用 setItem → 后写入者完全覆盖前写入者的修改。

基于时间戳的乐观锁方案（推荐用于读多写少）

核心思路：每次写入都附带一个客户端生成的毫秒级时间戳（作为逻辑版本号），读取时记录该时间戳，提交前校验本地缓存的时间戳是否仍等于当前存储中的时间戳。

定义存储结构：值为 JSON 字符串，包含 data 和 ts 字段，例如 {"data": 100, "ts": 1747629451234}
读取时：解析值，保存 ts 到内存变量（如 lastReadTs）
写入前：再次 getItem 获取最新值，解析其 ts；若与 lastReadTs 一致，说明无人修改，执行新写入并更新 ts 为 Date.now()；否则拒绝写入，提示用户“数据已被其他页面修改”，可选择刷新或合并
利用 storage 事件监听其他标签页变更：一旦收到事件，清空本地缓存或标记对应 key 为“需重新读取”，避免后续误用陈旧 lastReadTs

轻量级悲观锁模拟（适用于写操作关键且低频）

前端无法真正加数据库行锁，但可通过“锁标记 + 轮询等待”模拟悲观行为：

约定一个锁键，如 __lock:cart，值为持有锁的标签页 ID（可用 Math.random().toString(36).substr(2, 9) 生成）和过期时间戳（如 Date.now() + 5000）
尝试获取锁：用 setItem 写入锁键，但先检查是否已存在有效锁（未过期且非本页 ID）；若存在，暂停 200ms 后重试，最多 3 次
获得锁后，立即读取业务数据（如购物车）、执行修改、写入业务 key，最后清除锁键
配合 storage 事件监听锁释放或超时，避免死锁；页面卸载前主动清除自身持有的锁