SharedWorker 统一持久层与多页面协调

`title: SharedWorker 统一持久层与多页面协调``categories: Web 开发/前端/数据管理``keywords: SharedWorker,统一持久层,多页面,IndexedDB,OPFS``description: 使用 SharedWorker 在多页面间共享统一的持久层服务，通过消息协议协调写入与查询，降低竞争与重复。`启动与连接// main

const w = new SharedWorker('/persist-worker.js');

w.port.start();

w.port.postMessage({ type: 'put', collection: 'items', data: { id: '1' } });

w.port.onmessage = (e) => { /* 处理返回 */ };

Worker 侧// persist-worker.js

onconnect = (e) => {

const port = e.ports[0];

port.onmessage = async (ev) => {

const msg = ev.data;

if (msg.type === 'put') {

const db = await openDB('shared-db', 1);

await bulkPut(db, [msg.data]);

port.postMessage({ ok: true });

}

};

};