웹용 새로운 비동기 키 값(로컬) 저장소

WebStorage(LocalStorage/SessionStorage) API는 JavaScript를 사용하여 사용자의 브라우저에서 데이터를 저장하고 검색하는 간단하고 쉬운 방법 중 하나라는 것을 우리 모두 알고 있습니다.

불행히도 WebStorage API에는 큰 단점이 있습니다. 데이터를 동기적으로 저장하고 검색하므로(차단).

JavaScript를 사용하여 비동기식(비차단)으로 데이터를 저장/검색할 수 있는 대안이 있습니다. 그것이 IndexedDB입니다.

IndexedDB는 비동기적이고 효율적이며 LocalStorage API를 사용하여 할 수 있는 것보다 훨씬 더 많은 것을 저장할 수 있지만 API와 구문은 사용하기가 그렇게 간단하지 않습니다. 수십 개의 콜백과 이벤트를 처리해야 합니다.

그러나 IndexedDB를 스토리지 백엔드로 사용하는 WICG(Web Incubator Community Group)에서 제안한 새롭고 간편하고 효율적인 Async Key-Value Storage(KV 스토리지) API가 있습니다. 이 사양에 대한 자세한 내용을 확인할 수 있습니다here.

새로운 KV Storage는 아래 코드 스니펫과 같이 API와 같은 간단한 LocalSorage를 구현합니다.

(async () => {
  await kvStorage.set("mycat", "Tom");
  console.assert(await kvStorage.get("mycat") === "Tom");

  for await (const [key, value] of kvStorage.entries()) {
    console.log(key, value);
  }
  // Logs "mycat", "Tom"

  await kvStorage.delete("mycat");
  console.assert(await kvStorage.get("mycat") === undefined);
})();

이 문서를 작성하는 시점에서 이 사양에 대한 작업은 현재 브라우저 팀(제안을 시작한 Chromium 프로젝트 포함)이 구현에 관심을 표시하지 않기 때문에 일시 중단되었습니다.

그러나 600바이트 미만을 차지하는 keyval store에 의해 IndexedDB로 구현된 아주 간단한 작은 약속 기반Mozilla(Js 라이브러리)이 있습니다. 또한 나무를 흔드는 친화적입니다.

import { set, get } from 'idb-keyval';

set('hello', 'world')
  .then(() => console.log('It worked!'))
  .catch(err => console.log('It failed!', err));

get('hello').then(val => console.log(val));

IndexedDB 및 기타 엣지 케이스의 이전 구현을 포괄하는 광범위한 지원을 원하는 경우 총 번들 크기에서 10KB 미만을 차지하는 localForage을 사용할 수 있습니다.

이 npm@ngx-pwa/local-storage을 통해 다음 각도 프로젝트에서 localForage를 사용할 수 있습니다.

kv-storage-polyfill by GoogleChromeLabs을 사용하여 이 새로운 반짝이는 KV Storage를 사용해 볼 수도 있습니다.