存储

可以将命名存储的值恢复到浏览器存储中。

存储选项

如果省略存储选项，将重用该名称的现有存储别名，如果没有别名则 内存中是默认值。当需要持久性时，请指定存储。

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。值在当前选项卡/会话范围内保持，并在使用相同名称和存储选项重新创建时会被恢复。

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。