Penyimpanan

Nilai dari named store dapat dipulihkan ke dalam penyimpanan browser.

Opsi penyimpanan

Jika opsi penyimpanan diabaikan, akan menggunakan alias penyimpanan yang ada dengan nama tersebut, dan jika tidak ada alias, dalam memoriadalah nilai default. Tentukan penyimpanan saat diperlukan persistence.

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

Nama penyimpanan huruf kecil dapat digunakan sebagai bentuk dasar, dan alias untuk IndexedDB, WebSQL, localStorage, sessionStorage juga dinormalisasi ke backend yang sama.

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 dan sessionStorage menggunakan sessionStorage browser. Nilai dipertahankan dalam rentang tab/sesi saat ini dan akan dihidupkan kembali jika dibuat ulang dengan nama dan opsi penyimpanan yang sama.

tsx

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

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

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

Contoh penyimpanan pengaturan pengguna

Contoh di bawah ini menyimpan preferensi UI ke localStorageJika dibuat kembali dengan nama dan opsi penyimpanan yang sama setelah penyegaran, nilai yang disimpan akan dihydrate.

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

penyimpanan otomatis

automenggunakan localForage dan memilih driver yang mungkin dalam urutan IndexedDB, WebSQL, localStorage. Dalam kode yang harus menunggu penyelesaian hidrasi penyimpanan, siap gunakan Promise.