Stockage

Vous pouvez restaurer la valeur du store nommé dans le stockage du navigateur.

options de stockage

Si vous omettez l'option de stockage, l'alias de stockage existant avec ce nom sera réutilisé, et s'il n'y a pas d'alias, en mémoireest la valeur par défaut. Spécifiez le stockage lorsque la persistance est nécessaire.

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

Vous pouvez utiliser le nom de stockage en minuscules comme forme par défaut, et les alias pour IndexedDB, WebSQL, localStorage, sessionStorage sont également normalisés au même 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 de l'élément cible et sessionStorage utilise le sessionStorage du navigateur. La valeur est conservée dans la portée de l'onglet/session actuel et sera hydratée si elle est recréée avec le même nom et les mêmes options de stockage.

tsx

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

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

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

Exemple de sauvegarde des paramètres utilisateur

L'exemple ci-dessous sauvegarde les préférences de l'interface utilisateur. localStorageIl les sauvegarde. Si elles sont recréées avec le même nom et l'option de stockage après un rafraîchissement, les valeurs sauvegardées sont hydratées.

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

stockage automatique

autoutilise localForage et choisit le driver disponible dans l'ordre IndexedDB, WebSQL, localStorage. Dans le code qui doit attendre la fin de l'hydratation du stockage, prêt utilisez Promise.