Almacenamiento

Se pueden recuperar los valores del store nombrado en el almacenamiento del navegador.

opciones de almacenamiento

Si se omite la opción de almacenamiento, se reutiliza el alias de almacenamiento existente con ese nombre, y si no hay alias, en memoriaes el valor predeterminado. Especifica el almacenamiento cuando se necesita persistencia.

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

Puedes usar el nombre de almacenamiento en minúsculas como forma básica, y los alias de IndexedDB, WebSQL, localStorage, sessionStorage también se normalizan al mismo 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 del elemento objetivo y sessionStorage usa el sessionStorage del navegador. El valor se mantiene en el rango de la pestaña/sesión actual y se hidrata si se vuelve a crear con el mismo nombre y opción de almacenamiento.

tsx

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

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

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

Ejemplo de almacenamiento de configuraciones del usuario

El siguiente ejemplo guarda la preferencia de la UI localStorageen. Si se vuelve a crear con el mismo nombre y opción de almacenamiento después de la actualización, se hidratan los valores guardados.

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

almacenamiento automático

autousa localForage y elige el driver disponible en el orden de IndexedDB, WebSQL, localStorage. En el código donde se debe esperar el momento de finalización de la hidratación del almacenamiento, listo usa Promise.