从 webWorker 访问 localStorage

Question

WebWorker 可以访问 localStorage 吗？

如果不是为什么不呢？ 从安全的角度来看有问题吗？

Answer 1

Web 工作人员只能访问以下内容：

• XMLHttpRequest
• 应用程序缓存
• 创建其他 web 工人
• navigator器 object
• location object
• setTimeout方法
• clearTimeout方法
• setInterval方法
• clearInterval方法
• Performance object（ mark ， measure ， now方法： caniuse? ）
• IndexedDB API（见： caniuse? ）
• importScripts方法
• JSON
• Worker

window 或父对象无法从 Web 工作人员访问，因此您无法访问localStorage 。

要在 window 和workerglobalscope之间进行通信，您可以使用postMessage() function 和onmessage事件。

访问 DOM 和 window 不是线程安全的，因为子线程将具有与其父线程相同的权限。

Answer 2

不，localStorage 和 sessionStorage 在 webworker 进程中都是未定义的。

您必须将postMessage()调用回 Worker 的原始代码，并让该代码将数据存储在 localStorage 中。

有趣的是，网络工作者可以使用 AJAX 调用向/从服务器发送/检索信息，因此这可能会打开可能性，具体取决于您要执行的操作。

Answer 3

您可以在WebWorkers中使用IndexedDB ，这是一种将内容本地存储在键值存储中的方法。 它与 localStorage 不同，但它有类似的用例，可以保存相当多的数据。 在我的工作中，我们在 WebWorkers 中使用 IndexedDB。

2021 年 4 月 9 日 编辑：

对于使用 indexeddb 镜像本地存储 api 但使用异步而不是同步 API 的最小库，您可以使用位于此处的 idb idb-keyval 。 在写入大量数据时，最好在 JS 中使用像上面这样的异步 api，因为它可以让您不阻塞线程。

2020 年 4 月 21 日 编辑：

The below edit for August 2019 no longer applies, it included information on the KV storage api which was an API that mirrored the localStorage API that was async and meant to be built on top of the Indexeddb API, as pointed out by @hoogw the KV存储 API 目前没有被用于引用KV 存储规范：

此 [KV 存储] 规范的工作目前已暂停，因为目前没有浏览器团队（包括发起该提案的 Chromium 项目）表示有兴趣实施它。

**2019 年 8 月编辑：**

有一个提议的 API 可能会在未来某个时候发布（尽管它目前在 Chrome Canary 中可用，实验性的 web 功能标志已打开）。 它被称为 KV 存储（KV 是 Key Value 的缩写）。 它具有与 localStorage API 几乎相同的接口，并将包含在 JavaScript 模块中。 它基于索引数据库 API 构建，但具有更简单的 API。 从规范来看，这似乎也适用于 WebWorkers。 有关如何使用它的示例，请参阅规范的github 页面。 这是一个这样的例子：

 import storage, { StorageArea } from "std:kv-storage"; import {test, assert} from "./florence-test"; test("kv-storage test",async () => { await storage.clear() await storage.set("mycat", "Tom"); assert(await storage.get("mycat") === "Tom", "storage: mycat is Tom"); const otherStorage = new StorageArea("unique string"); await otherStorage.clear() assert(await otherStorage.get("mycat") === undefined, "otherStorage: mycat is undefined"); await otherStorage.set("mycat", "Jerry"); assert(await otherStorage.get("mycat") === "Jerry", "otherStorage: mycat is Jerry"); });

这是 Chrome Canary 中通过的测试：

虽然没有必要使用 kv-storage api 以下代码是用于上述代码的测试框架：

 //./florence-test.js // Ryan Florence's Basic Testing Framework modified to support async functions // https://twitter.com/ryanflorence/status/1162792430422200320 const lock = AsyncLock(); export async function test (name, fn) { // we have to lock, so that console.groups are grouped together when // async functions are used. for await (const _ of lock) { console.group(name); await fn(); console.groupEnd(name); } }; export function assert (cond, desc) { if (cond) { console.log("%c✔️", "font-size: 18px; color: green", desc); } else { console.assert(cond, desc); } }; // https://codereview.stackexchange.com/questions/177935/asynclock-implementation-for-js function AsyncLock() { const p = () => new Promise(next => nextIter = next ); var nextIter, next = p(); const nextP = () => { const result = next; next = result.then(() => p() ); return result;} nextIter(); return Object.assign({}, { async * [Symbol.asyncIterator] () { try { yield nextP() } finally { nextIter() } } }); }

Answer 4

kvStorage是一个不错的选择，但是，

2019 年 12 月。kvStorage 目前不支持，将来也不支持 chrome。

该规范的工作目前已暂停，因为目前没有浏览器团队（包括发起该提案的 Chromium 项目）表示有兴趣实施它。