Доступ к локальному хранилищу из webWorker - программирование
Подтвердить что ты не робот

Доступ к локальному хранилищу из webWorker

Может ли WebWorker получить доступ к локальному хранилищу?

Если нет, то почему? Это проблематично с точки зрения безопасности?

4b9b3361

Ответ 1

Нет, localStorage и sessionStorage являются undefined в процессе веб-поиска.

Вам нужно будет вызвать postMessage() обратно к исходному коду Работника, и этот код хранит данные в localStorage.

Интересно, что веб-сайт может использовать вызов AJAX для отправки/получения информации на/с сервера, чтобы открывать возможности, в зависимости от того, что вы пытаетесь сделать.

Ответ 2

Работники Web имеют доступ только к следующим функциям:

  • XMLHttpRequest
  • Кэш приложения
  • создать других веб-работников.
  • объект навигатора
  • объект местоположения
  • метод setTimeout
  • метод clearTimeout
  • setInterval метод
  • метод clearInterval
  • метод importScripts
  • JSON
  • Работник

Окно или родительские объекты недоступны веб-работнику, поэтому вы не можете получить доступ к локальному хранилищу.

Чтобы установить связь между окном и рабочим полем, вы можете использовать функцию postMessage() и событие onmessage.

Доступ к DOM и окну не будет потокобезопасным, так как дочерний поток будет иметь те же привилегии, что и его родитель.

Ответ 3

Вы можете использовать IndexedDB в WebWorkers, который позволяет хранить вещи локально в хранилище значений ключей. Это не то же самое, что localStorage, но он имеет аналогичные варианты использования и может содержать довольно много данных. Мы используем IndexedDB в WebWorkers на моей работе.

Август 2019 года. ИЗМЕНИТЬ:

Существует предложенный API, который может появиться в будущем (хотя в настоящее время он доступен в Chrome Canary с включенным флагом экспериментальных веб-функций). Он называется KV Storage (KV - сокращение от Key Value). Он имеет почти идентичный интерфейс с API-интерфейсом localStorage и поставляется с модулями JavaScript. Он построен на основе API indexeddb, но имеет гораздо более простой API. Глядя на Spec, кажется, что это будет работать и в 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:

enter image description here

Хотя нет необходимости использовать API-интерфейс kv-хранилища, приведенный ниже код представляет собой среду тестирования, используемую для вышеуказанного кода:

// ./florence-test.js

// Ryan Florence 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/info/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() 
      } 
    }
  });
}