Web Locks API 是浏览器提供的协调同一源下多执行上下文对共享资源访问的机制。通过 navigator.locks 对象，开发者可使用 request(name, callback) 请求命名锁，确保关键操作串行执行，避免多标签页间的数据竞争。锁在页面关闭或作用域结束时自动释放，支持异步排队等待。适用于 IndexedDB 写入、localStorage 一致性维护等场景，有效防止并发写入冲突，提升应用稳定性。主流浏览器已基本支持。
Web Locks API 是一种浏览器提供的机制，用于协调同一源下的多个执行上下文（如不同标签页或工作线程）对共享资源的访问。它通过提供一种显式的锁机制，避免多个页面同时修改关键数据或状态，从而解决多标签页应用中的资源竞争问题。
什么是 Web Locks API
Web Locks API 属于现代浏览器的一部分，定义在 W3C 的实验性规范中。它的核心是 navigator.locks 对象，允许开发者请求、持有和释放命名锁。这些锁是可重入的、作用于整个源（origin）范围，并且自动释放当页面关闭或锁持有者不再需要时。
主要方法包括：
- request(name, callback)：尝试获取指定名称的锁，成功后执行回调函数
- query()：返回当前持有的锁的状态信息（用于调试）
锁的请求是异步的，支持排队机制——如果一个锁正在被占用，后续请求会等待前一个释放后再依次执行。
如何解决多标签页资源竞争
在多标签页应用中，比如一个在线笔记工具或购物车系统，用户可能在多个窗口同时操作同一份数据。若没有协调机制，容易出现覆盖写入、重复提交等问题。Web Locks API 提供了一种轻量级同步手段。
例如，当两个标签页试图同时保存用户设置时：
- 第一个标签页调用 navigator.locks.request('settingsStore', ...) 成功获得锁，执行保存逻辑
- 第二个标签页发起相同请求，但必须等待，直到第一个完成并退出锁作用域
- 这样确保了写入顺序化，避免并发冲突
这种机制特别适用于以下场景：
- 本地缓存更新（IndexedDB 写入）
- localStorage 数据一致性维护
- 防止重复初始化全局状态
- 控制后台同步任务不重复运行
实际使用示例
下面是一个简单的代码片段，展示如何用 Web Locks 防止并发写入：
navigator.locks.request('userProfile', async (lock) => {const data = await fetch('/api/profile');
const settings = await data.json();
// 修改并保存
await saveToIndexedDB(settings);
}); // 锁在此处自动释放
即使多个页面同时运行这段代码，只有获得锁的那个能进入回调执行，其余都会排队。
基本上就这些。Web Locks API 不复杂但容易忽略，对于提升多标签页应用的稳定性很有帮助。目前主流浏览器已基本支持，适合在需要协调客户端并发的场景中使用。
