JavaScript 中 LocalStorage 怎么实现数据读写的加锁机制-js教程-PHP中文网

localstorage天然不支持加锁，因其是同步单线程api，不跨标签页/iframe/worker，无全局互斥原语，多标签并发读-改-写易致aba问题和数据覆盖。

javascript 中 localstorage 怎么实现数据读写的加锁机制

LocalStorage 本身不提供加锁机制，它是同步、单线程、无并发控制的浏览器 API。所谓“加锁”，实际是开发者通过约定或模拟手段规避多标签/多窗口场景下的竞态问题。关键不是真锁，而是避免覆盖、丢失更新和读写不一致。

为什么 LocalStorage 天然不支持加锁

LocalStorage 是阻塞式同步 API，但它的“同步”仅针对当前执行线程（即当前 JS 执行栈），**不跨 tab、不跨 iframe、不跨 worker**。多个浏览器标签页共享同一份存储，但彼此独立执行 JS，没有全局互斥原语（如 mutex 或 await lock）。直接读-改-写（read-modify-write）极易引发 ABA 问题：标签页 A 读取值 → 标签页 B 修改并写入 → 标签页 A 覆盖写入，B 的变更被静默丢弃。

简易乐观并发控制（推荐轻量场景）

不引入外部依赖，用版本号或时间戳标记数据状态，写入前校验是否“未被他人修改”：

每次写入时，存一个自增 version 或毫秒级 timestamp（如 data: {...}, _v: 123, _ts: 1715892345678）
读取时缓存当前 version；写入前先重新读取，比对 version 是否一致
不一致则拒绝写入，提示用户“数据已被其他窗口修改”，或自动合并（需业务逻辑支持）

示例：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

// 读
const item = JSON.parse(localStorage.getItem('user') || '{}');
const cachedVersion = item._v;

// 写（带校验）
function safeUpdate(key, updater) {
  let current = JSON.parse(localStorage.getItem(key) || '{}');
  if (current._v !== cachedVersion) {
    throw new Error('Concurrent update conflict');
  }
  const next = { ...current, ...updater(), _v: (current._v || 0) + 1 };
  localStorage.setItem(key, JSON.stringify(next));
}