Speicher

Sie können die Werte des benannten Stores im Browser-Speicher wiederherstellen.

Speicheroptionen

Wenn Sie die Speicheroption weglassen, wird das vorhandene Speicheralias mit diesem Namen wiederverwendet, und wenn kein Alias vorhanden ist, im Speicherist der Standardwert. Geben Sie einen Speicher an, wenn Persistenz erforderlich ist.

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

Kleinbuchstaben-Speichernamen können in der Standardform verwendet werden, und die Aliase für IndexedDB, WebSQL, localStorage, sessionStorage werden ebenfalls auf dasselbe Backend normalisiert.

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 und sessionStorage verwendet den Browser sessionStorage. Werte werden im aktuellen Tab/Sitzungsbereich beibehalten und werden hydratisiert, wenn sie mit demselben Namen und denselben Speicheroptionen erneut erstellt werden.

tsx

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

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

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

Beispiel zum Speichern von Benutzereinstellungen

Das folgende Beispiel speichert die UI-Präferenz. localStorageWenn es nach dem Neuladen mit demselben Namen und derselben Speicheroption erneut erstellt wird, wird der gespeicherte Wert hydratisiert.

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-Speicher

autoverwendet localForage und wählt den verfügbaren Treiber in der Reihenfolge IndexedDB, WebSQL, localStorage. In Code, der auf den Abschluss der Speicherhydration warten muss, bereit verwenden Sie ein Promise.