存儲

可以將命名存儲的值恢復到瀏覽器存儲中。

存儲選項

如果省略存儲選項，則會重用該名稱的現有存儲別名，若沒有別名， 內存中是默認值。當需要持久性時，請指定存儲。

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。值在當前標籤/會話範圍內保持，並在使用相同的名稱和存儲選項重新創建時會被水合。

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保存到。即使在刷新後以相同名稱和存儲選項重新生成，也會恢復已保存的值。

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。