Menguruskan Storan Tempatan dalam React dengan useLocalStorage Hook

Artikel ini menunjukkan membina cangkuk yang boleh digunakan semula useLocalStorage React hook untuk pengurusan storan tempatan yang cekap. Ini memudahkan pengendalian data yang berterusan dalam aplikasi React anda, menawarkan pendekatan yang bersih dan selamat jenis.

1. Fungsi Utiliti Storan Tempatan

Sebelum mencipta cangkuk, kami membina fungsi pembantu untuk berinteraksi dengan localStorage:

• setItem(key: string, value: unknown): Menyimpan data dengan selamat dalam localStorage. Ia mensirikan nilai menggunakan JSON.stringify dan mengendalikan kemungkinan ralat (seperti melebihi had storan) dengan mengelognya ke konsol.

• getItem<T>(key: string): T | undefined: Mendapat dan menghuraikan data daripada localStorage. Ia menggunakan generik TypeScript (<T>) untuk keselamatan jenis, mengembalikan undefined jika kunci tidak wujud. Pengendalian ralat disertakan.

• removeItem(key: string): Mengalih keluar pasangan nilai kunci daripada localStorage, juga dengan pengendalian ralat.

2. useLocalStorage Cangkuk

Inti penyelesaian ini ialah useLocalStorage cangkuk:

• Permulaan: Cangkuk mengambil key (untuk localStorage) dan initialValue sebagai parameter. Ia memulakan keadaannya menggunakan useState, menyemak localStorage untuk data sedia ada; jika tidak dijumpai, ia menggunakan initialValue.

• Kemas Kini Negeri (handleDispatch): Fungsi ini mengemas kini kedua-dua keadaan komponen dan localStorage. Ia menerima sama ada nilai baharu atau fungsi (untuk mengemas kini berdasarkan keadaan sebelumnya), memastikan penyegerakan.

• Pembersihan Negeri (clearState): Fungsi ini menetapkan semula keadaan kepada undefined dan mengalih keluar item daripada localStorage.

• Nilai Pulangan: Cangkuk mengembalikan tatasusunan: [value, handleDispatch, clearState], memberikan akses kepada nilai semasa, fungsi kemas kini dan fungsi jelas.

3. Menggunakan Cangkuk

Berikut ialah cara menggunakan useLocalStorage dalam komponen React:

<code class="language-javascript">import useLocalStorage from "./useLocalStorage"; // Path to your hook file

function Counter() {
  const [count, setCount, clearCount] = useLocalStorage<number>("counter", 0);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
      <button onClick={() => setCount((prev) => prev - 1)}>Decrement</button>
      <button onClick={clearCount}>Reset</button>
    </div>
  );
}</code>

Contoh ini menunjukkan kefungsian kaunter yang berterusan. Nilai count disimpan dalam localStorage dan kekal dalam muat semula halaman.

Kod Penuh (localStorage.ts dan useLocalStorage.ts)

kod lengkap untuk localStorage.ts dan useLocalStorage.ts disediakan dalam input asal dan tetap tidak berubah.

Kesimpulan

cangkuk adat ini menyediakan penyelesaian yang teguh, jenis selamat, dan boleh diguna semula untuk menguruskan data berterusan dalam aplikasi React menggunakan localStorage. API bersihnya memudahkan pembangunan dan meningkatkan pemeliharaan kod.

Atas ialah kandungan terperinci Menguruskan Storan Tempatan dalam React dengan useLocalStorage Hook. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!