Web Storage API 사용을 개선하는 손쉬운 방법인 Rolling Stores

5MB의 localStorage와 sessionStorage는 데이터를 저장하기에 좋은 장소입니다. 항목을 추가하거나 제거할 수 있으며 브라우저/탭 세션(sessionStorage)에 따라 데이터를 저장하거나 브라우저가 닫히더라도 유지하도록 결정할 수 있습니다(localStorage).

개발자가 웹 성능을 개선하는 데 도움이 됩니다.

네트워크 트래픽 감소

표시 시간을 대폭 단축

RPC 호출의 캐시 데이터

시작 시 캐시된 데이터 로드(빠른 시작)

임시 상태 저장

앱 재진입 시 상태 복원

네트워크 연결 끊김으로 인한 작업 손실 방지

Storage Web API에 대해 자세히 알아보려면 다음을 읽어보십시오. MDN Storage Web API

그러나 두 저장소 모두 큰 제한이 있습니다. 모든 항목은 문자열이어야 합니다. 숫자, 배열, 객체... 문자열로 변환해야 합니다!
이러한 이유로 localStorage/sessionStorage를 사용한 작업은 실패할 수 있습니다. 항상 원래 항목 유형으로 다시 변환해야 한다는 것을 기억해야 합니다.

Rolling Store(trs)는 간단한 객체로 작업할 때 localStorage/sessionStorage로 작업할 수 있는 기회를 제공합니다.

import trs from "/path/to/the-rolling-store";

const session = true;
const mystore = trs(session);

session는 부울이며 스토리지가 사용해야 하는 Rolling Store에 다음을 알려줍니다. true for sessionStorage, false localStorage. 기본값: true .

이제 원하는 대로 속성을 추가할 수 있습니다.

mystore.prop1 = "prop1"; // string
mystore.prop2 = 12.99; // number
mystore.prop3 = true; // boolean
mystore.prop4 = {
  x: 1,
  y: "hello, world",
  z: false
}; // object
mystore["prop5"] = "prop5";

그리고 그것들을 읽는다:

console.log(mystore.prop1); // prop1
console.log(mystore.prop2); // 12.99
console.log(mystore.prop3); // true
console.log(mystore.prop4); 
/*
{
  x: 1,
  y: "hello, world",
  z: false
}
*/
console.log(mystore["prop5"]); // prop5

trs는 원본 유형을 보장합니다.
trs는 remove , subscribe 및 clear 메서드를 노출합니다.
remove 메서드는 속성을 삭제합니다.

mystore.remove("prop1");
console.log(mystore.prop1); // null

subscribe는 특정 속성의 값 변경을 수신할 수 있는 가능성을 제공합니다. 값이 변경될 때마다 콜백이 실행됩니다.

const subscription = mystore.subscribe("prop2", (val) => {
  console.log("prop2", val);
});

// To unsubscribe
subscription.unsubscribe();

clear 메서드는 저장소에 추가된 모든 속성을 삭제합니다.

mystore.clear();

다음은 Rolling Store 소스 코드입니다.

// /path/to/the-rolling-store.js

import { BehaviorSubject } from "rxjs";

export default (session = true) => {
  const storage = session ? sessionStorage : localStorage;
  const subjects = {};

  const getSubject = (prop, value) => {
    if (!(prop in subjects)) {
      subjects[prop] = new BehaviorSubject(value);
    }
    return subjects[prop];
  };

  const pubUpdate = (prop, value) => {
    getSubject(prop).next(value);
  };

  const getSubscription = (prop, callback) => {
    return getSubject(prop).subscribe((v) => callback(v));
  };

  const subscribe = new Proxy(getSubscription, {
    apply(target, thisArg, args) {
      return target(...args);
    }
  });

  const remove = new Proxy((prop) => storage.removeItem(prop), {
    apply(target, thisArg, args) {
      return target(...args);
    }
  });

  const clear = new Proxy(storage.clear, {
    apply(target, thisArg, args) {
      return target(...args);
    }
  });

  const key = new Proxy((index) => storage.key(index), {
    apply: (target, thisArg, args) => {
      return target(...args);
    }
  });

  const methodsMap = {
    subscribe,
    remove,
    clear,
    key
  };

  return new Proxy(storage, {
    get(store, prop) {
      if (prop in methodsMap) {
        return methodsMap[prop];
      }
      return JSON.parse(store.getItem(prop));
    },
    set(store, prop, value) {
      store.setItem(prop, JSON.stringify(value));
      pubUpdate(prop, value);
      return true;
    }
  });
};

Codesandbox로 이동하여 플레이The Rolling Store

수정하거나 개선 사항을 제안하십시오. 그것은 출발점입니다... 그리고 이것은 영어로 된 저의 첫 번째 기술 기사입니다! 😱