WebWorker 可以访问 localStorage 吗？
如果不是为什么不呢？从安全的角度来看有问题吗？
问问题
37757 次
5 回答
109
Web 工作者只能访问以下内容：
XMLHttpRequest- 应用程序缓存
- 创建其他网络工作者
navigator目的location目的setTimeout方法clearTimeout方法setInterval方法clearInterval方法Performance对象 (mark,measure,now方法:caniuse?)IndexedDBAPI（见caniuse?：）importScripts方法JSONWorker
Web 工作者无法访问窗口或父对象，因此您无法访问localStorage.
要在窗口和窗口之间进行通信，workerglobalscope您可以使用postMessage()函数和onmessage事件。
访问 DOM 和窗口不是线程安全的，因为子线程将拥有与其父线程相同的权限。
于 2011-05-30T18:52:26.643 回答
74
不，localStorage 和 sessionStorage 在 webworker 进程中都是未定义的。
您必须postMessage()回调 Worker 的原始代码，并让该代码将数据存储在 localStorage 中。
有趣的是，网络工作者可以使用 AJAX 调用向服务器发送/检索信息，因此这可能会打开可能性，具体取决于您要执行的操作。
于 2011-05-30T18:28:24.350 回答
38
您可以在WebWorkers中使用IndexedDB ，这是一种将内容本地存储在键值存储中的方法。它与 localStorage 不同，但它有类似的用例，可以保存相当多的数据。在我的工作中，我们在 WebWorkers 中使用 IndexedDB。
2021 年 4 月 9 日 编辑：
对于使用 indexeddb 镜像本地存储 api 但使用异步而不是同步 api 的最小库，您可以使用idb-keyval位于此处的 api 。在写入大量数据时，最好在 JS 中使用类似上述的异步 api，因为它可以让您不阻塞线程。
2020 年 4 月 21 日 编辑：
2019 年 8 月的以下编辑不再适用，它包含有关 KV 存储 API 的信息，该 API 反映了异步的 localStorage API，旨在构建在 Indexeddb API 之上，正如@hoogw KV 所指出的那样存储 API 目前没有用于引用KV 存储规范：
此 [KV 存储] 规范的工作目前已暂停，因为目前没有浏览器团队（包括发起该提案的 Chromium 项目）表示有兴趣实施它。
有一个提议的 API 可能会在未来的某个时候发布（尽管它目前在 Chrome Canary 中可用，并打开了实验性网络功能标志）。它被称为 KV 存储（KV 是 Key Value 的缩写）。它具有与 localStorage API 几乎相同的接口，并将包含在 JavaScript 模块中。它是基于 indexeddb 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()
}
}
});
}
于 2015-12-18T19:38:59.510 回答
2
kvStorage是一个不错的选择，但是，
2019 年 12 月。kvStorage 目前不支持，将来也不支持 chrome。
该规范的工作目前已暂停，因为目前没有浏览器团队（包括发起该提案的 Chromium 项目）表示有兴趣实施它。
于 2019-12-31T19:53:32.467 回答
0
Partytown 可以在这里提供帮助 - https://github.com/builderio/partytown
有了它，你可以从工作线程中读取/写入主线程数据，而无需来回构建一堆 postMessage 协议
于 2022-02-15T18:26:47.267 回答