Storage

Named store의 값을 브라우저 storage에 복구할 수 있습니다.

storage options

storage option을 생략하면 해당 name의 기존 storage alias를 재사용하고, alias가 없으면 in-memory가 기본값입니다. persistence가 필요할 때 storage를 지정하세요.

type RxStateStorage =
  | "in-memory"
  | "auto"
  | "indexeddb"
  | "IndexedDB"
  | "websql"
  | "WebSQL"
  | "localstorage"
  | "localStorage"
  | "sessionstorage"
  | "sessionStorage";

소문자 storage 이름을 기본 형태로 사용할 수 있고 IndexedDB, WebSQL, localStorage, sessionStorage 별칭도 같은 backend로 정규화됩니다.

createRxState(0, "count");
// alias가 없으므로 in-memory

createRxState(0, "count", { storage: "auto" });
// 같은 name이어도 storage가 다르면 별도 store

createRxState(0, "theme", { storage: "localstorage" });
createRxState("", "draft", { storage: "sessionstorage" });
createRxState("", "draftAlias", { storage: "sessionStorage" });

sessionstorage

sessionstorage 와 sessionStorage 는 브라우저 sessionStorage를 사용합니다. 값은 현재 탭/세션 범위에서 유지되며 같은 name과 storage option으로 다시 생성하면 hydrate됩니다.

tsx

const { setDraft, useDraft } = createRxState(
  "",
  "draft",
  { storage: "sessionStorage" },
);

function DraftInput() {
  const draft = useDraft();

  return (
    <input
      value={draft}
      onChange={(event) => setDraft(event.target.value)}
    />
  );
}

사용자 설정 저장 예제

아래 예제는 UI preference를 localStorage에 저장합니다. 새로고침 후에도 같은 name과 storage option으로 다시 생성되면 저장된 값을 hydrate합니다.

tsx

const { setPrefs, usePrefs, prefsReady } = createRxState(
  { compact: false, showHints: true },
  "prefs",
  { storage: "localstorage" },
);

function PreferencesPanel() {
  const prefs = usePrefs();

  return (
    <button onClick={() => setPrefs((prev) => ({ ...prev, compact: !prev.compact }))}>
      compact: {String(prefs.compact)}
    </button>
  );
}

auto storage

auto는 localForage를 사용하며 IndexedDB, WebSQL, localStorage 순서로 가능한 driver를 선택합니다. storage hydration 완료 시점을 기다려야 하는 코드에서는 ready Promise를 사용하세요.