webWorker에서 localStorage에 액세스

webWorker에서 localStorage에 액세스

---

WebWorker가 localStorage에 액세스 할 수 있습니까?

그렇지 않다면 그 이유는 무엇입니까? 보안 측면에서 문제가 있습니까?

---

아니요, localStorage와 sessionStorage는 모두 웹 워커 프로세스에서 정의되지 않습니다.

postMessage()Worker의 원래 코드를 다시 호출 하고 해당 코드가 localStorage에 데이터를 저장하도록해야합니다.

흥미롭게하는 webworker는 수 그건 당신이 뭘 하려는지에 따라 가능성을 열 수 있도록 서버에서 /에 대한 정보를 검색 / 전송하는 AJAX 호출을 사용합니다.

---

웹 작업자는 다음 항목에만 액세스 할 수 있습니다.

• XMLHttpRequest
• 응용 프로그램 캐시
• 다른 웹 작업자 생성
• 네비게이터 객체
• 위치 객체
• setTimeout 메서드
• clearTimeout 메서드
• setInterval 메서드
• clearInterval 메서드
• importScripts 메서드
• JSON
• 노동자

창 또는 부모 개체는 웹 작업자에서 액세스 할 수 없으므로 localStorage에 액세스 할 수 없습니다.

window와 workerglobalscope 사이에 통신하려면 postMessage()function 및 onmessage 이벤트를 사용할 수 있습니다 .

DOM 및 창에 액세스하는 것은 자식 스레드가 부모와 동일한 권한을 가지므로 스레드로부터 안전하지 않습니다.

---

WebWorkers 에서 IndexedDB 를 사용할 수 있습니다 . 이는 키 값 저장소에 로컬로 물건을 저장하는 방법입니다. localStorage와 동일하지는 않지만 사용 사례가 비슷하고 많은 양의 데이터를 저장할 수 있습니다. 우리는 내 직장에서 WebWorkers에서 IndexedDB를 사용합니다.

2019 년 8 월 편집 :

향후 언젠가 나올 수있는 제안 된 API가 있습니다 (현재 Chrome Canary에서 실험용 웹 기능 플래그가 설정된 상태로 사용할 수 있음). KV Storage (KV는 Key Value의 약자)라고합니다. localStorage API와 거의 동일한 인터페이스를 가지며 JavaScript 모듈로 제공됩니다. indexeddb API를 기반으로 구축되었지만 훨씬 간단한 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에서 통과 한 테스트입니다.

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

참고 URL : https://stackoverflow.com/questions/6179159/accessing-localstorage-from-a-webworker