ストレージ

名前付きストアの値をブラウザストレージに復元できます。

ストレージオプション

ストレージオプションを省略すると、該当nameの既存ストレージエイリアスを再利用し、エイリアスがない場合は インメモリがデフォルト値です。永続性が必要な場合はストレージを指定してください。

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

小文字のストレージ名を基本形として使用でき、IndexedDB、WebSQL、localStorage、sessionStorageのエイリアスも同じバックエンドで正規化されます。

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を使用します。値は現在のタブ/セッション範囲で保持され、同じnameとストレージオプションで再生成すると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の好みを localStorageに保存します。リフレッシュ後も同じnameとストレージオプションで再生成されると、保存された値がハイドレートされます。

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

自動ストレージ

自動はlocalForageを使用し、IndexedDB、WebSQL、localStorageの順で利用可能なドライバーを選択します。ストレージハイドレーションの完了を待つ必要があるコードでは 準備完了 Promiseを使用してください。