64

WebWorkerはlocalStorageにアクセスできますか？

そうでない場合はどうしてですか？セキュリティの観点から問題がありますか？

4

5 に答える 5

109

Web workers only have access to the following:

The window or parent objects are not accessible from a Web worker therefore you can't access the localStorage.

To communicate between window and the workerglobalscope you may use postMessage() function and onmessage event.

Accessing the DOM and window would not be thread safe, since the child thread would have the same privileges as its parent.

于 2011-05-30T18:52:26.643 に答える
74

いいえ、localStorageとsessionStorageはどちらもWebworkerプロセスでは未定義です。

ワーカーの元のコードにコールpostMessage()バックし、そのコードでデータをlocalStorageに保存する必要があります。

興味深いことに、WebworkerはAJAX呼び出しを使用して、サーバーとの間で情報を送受信できるため、実行しようとしていることによっては、可能性が開かれる可能性があります。

于 2011-05-30T18:28:24.350 に答える
38

WebWorkersでIndexedDBを使用できます。これは、キー値ストアにローカルに格納する方法です。localStorageと同じではありませんが、同様のユースケースがあり、かなりの量のデータを保持できます。私の仕事では、WebWorkersでIndexedDBを使用しています。

2021年4月9日編集：

indexeddbを使用する最小限のライブラリの場合、ローカルストレージAPIをミラーリングしますが、idb-keyvalここにある同期APIではなく非同期APIを使用します。大量のデータを書き込む場合は、スレッドをブロックしないようにするため、JSで上記のような非同期APIを使用することをお勧めします。

2020年4月21日編集：

以下の2019年8月の編集は適用されなくなりました。これには、@ hoogw the KVが指摘したように、非同期であり、IndexeddbAPIの上に構築されることを意図したlocalStorageAPIをミラーリングしたAPIであるKVストレージAPIに関する情報が含まれていました。 Storage APIは現在、KVストレージ仕様を引用するために作業されていません：

この[KVstrorage]仕様の作業は現在中断されています。これは、ブラウザーチーム（提案を作成したChromiumプロジェクトを含む）が現在、この仕様の実装に関心を示していないためです。

** 2019年8月編集：**

将来的にリリースされる可能性のあるAPIが提案されています（ただし、現在Chrome Canaryで利用可能であり、実験的なウェブ機能フラグがオンになっています）。これはKVストレージと呼ばれます（KVはKey Valueの略です）。localStorage APIとほぼ同じインターフェースを備えており、JavaScriptモジュールで提供されます。これはindexeddbAPIから構築されていますが、はるかに単純なAPIを備えています。仕様を見ると、これはWebWorkersでも機能するようです。使用方法の例については、仕様のgithubページを参照してください。そのような例の1つを次に示します。

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");
});

ChromeCanaryで合格したテストは次のとおりです。

ここに画像の説明を入力してください

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 に答える