BroadcastChannel配合localStorage可实现无后端的全局单例任务控制：通过带时间戳和随机ID的锁抢占、广播通知及有效期校验，确保多窗口下任务仅执行一次。
在多标签页或多窗口的 Web 应用中，若需确保某项耗时任务（如初始化、同步、表单提交防重）**全局仅执行一次**，不能依赖单个页面的内存状态。BroadcastChannel 可跨上下文广播消息，配合本地事务锁（如 localStorage + 时间戳 + 随机标识），就能实现轻量、无后端依赖的“单例任务授权”逻辑。
核心思路：谁抢到锁，谁执行任务
不靠服务端协调，而是让所有窗口竞争一个“锁资源”。抢到者执行任务并广播结果；其余窗口监听广播，跳过执行，等待完成通知。
- 锁存于 localStorage，键名固定（如
__singleton_task_lock） - 锁值包含：时间戳 + 随机 ID + 窗口标识（用于识别持有者）
- 设置锁时用
localStorage.setItem()，但需配合try...catch和短过期（如 5 秒），避免死锁 - BroadcastChannel 用于实时通知：锁获取、任务开始、任务完成、锁释放
具体实现四步走
以“用户首次进入首页时触发一次数据预加载”为例：
-
1. 尝试抢占锁：进入页面时立即检查 localStorage 是否存在有效锁（未过期）。若无，则用
Date.now() + Math.random()生成带时间戳的新锁值写入，并确认写入成功（注意 Safari 私密模式下 localStorage 可能只读） -
2. 监听广播通道：创建
new BroadcastChannel('singleton-task')，监听message事件，关注type: 'task-started'或'task-completed' -
3. 持有锁者执行任务：抢锁成功后，立即发
{ type: 'task-started', lockId: 'xxx' }广播，并调用实际任务函数；完成后发{ type: 'task-completed', result: ... }，再清除本地锁 -
4. 其他窗口响应协作：收到
task-started后暂停自身尝试；收到task-completed后更新 UI 或恢复流程，无需再抢锁
关键细节与容错设计
真实场景中需防御竞态、崩溃、时钟漂移等问题：
- 锁有效期必须校验：每次读锁都解析时间戳，超过 5 秒自动忽略（防止页面崩溃导致锁残留）
- 避免反复广播风暴：仅由锁持有者发送 start/completed；其他窗口只监听，不主动广播
-
页面卸载前主动释放锁：监听
beforeunload，清除锁并广播{ type: 'lock-released' }（可选，提升健壮性） - 降级策略：若 BroadcastChannel 不支持（IE）或 localStorage 不可用，回退为“每个窗口各自执行 + 结果缓存去重”，不影响功能正确性
代码片段示意（精简版）
无需第三方库，原生 API 即可实现：
const CHANNEL = new BroadcastChannel('singleton-task');
const LOCK_KEY = '__singleton_task_lock';
const LOCK_TTL = 5000;
<p>function acquireLock() {
const now = Date.now();
const candidate = JSON.stringify({ ts: now, id: Math.random().toString(36).substr(2, 9) });
try {
localStorage.setItem(LOCK_KEY, candidate);
const stored = localStorage.getItem(LOCK_KEY);
if (stored === candidate) {
return JSON.parse(candidate);
}
} catch (e) {}
return null;
}</p><p>function isLockValid(lock) {
return lock && Date.now() - lock.ts < LOCK_TTL;
}</p><p>// 抢锁并执行（仅一次）
function runSingletonTask(taskFn) {
const lock = acquireLock();
if (!lock) {
// 监听他人执行结果
CHANNEL.addEventListener('message', onMessage);
return;
}</p><p>// 我抢到了！广播启动，执行任务
CHANNEL.postMessage({ type: 'task-started', lockId: lock.id });
taskFn()
.then(result => {
CHANNEL.postMessage({ type: 'task-completed', result });
localStorage.removeItem(LOCK_KEY);
})
.catch(err => {
console.error('Task failed', err);
localStorage.removeItem(LOCK_KEY);
});
}</p> 
