Bertindak balas: segerakkan dengan storan setempat

Question

Mempunyai apl React. Komponen tertentu akan menetapkan nilai data yang berbeza kepada storan setempat menggunakan kunci yang sama dalam tempoh masa tertentu. Saya perlu melanggan beberapa komponen projek ini dalam storan tempatan. Setiap kali nilai dengan kunci tertentu dikemas kini dalam storan tempatan, komponen yang dilanggan harus dimaklumkan atau diberikan nilai yang dikemas kini dalam storan tempatan.

Saya cuba mencipta cangkuk tersuai untuk ini dan menggunakan dengan dengan menambahkan pendengar acara pada acara storage seperti yang ditunjukkan di bawah.

const useSyncLocalStorage = (key: string) => {
  const [storageVal, setStorageVal] = useState<string | null>(() => localStorage.getItem(key));

  const handleStorageChange = () => {
    const value = localStorage.getItem(key);
    setStorageVal(value);
  };

  useEffect(() => {
    window.addEventListener('storage', handleStorageChange);

    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, []);

  return storageVal;
};

dan gunakannya dalam komponen anda seperti ini:

const locationStored = useSyncLocalStorage('location');

Saya cuba mengemas kini nilai storan tempatan pada acara klik tetapi cangkuk tidak mengembalikan nilai yang dikemas kini dalam storan tempatan. Saya mengesahkan bahawa nilai storan tempatan telah dikemas kini dalam alat pembangun. Isunya nampaknya acara storage tidak dicetuskan dalam tetingkap/tab yang sama yang menyebabkan perubahan storan.

Adakah terdapat cara untuk melanggan nilai localstorage?

Answer 1

Pendekatan yang anda ambil adalah betul, tetapi anda betul, peristiwa storan tidak menyala dalam tetingkap/tab yang sama yang menyebabkan perubahan storan. Acara storan bertujuan untuk memberitahu tetingkap atau tab lain bahawa storan telah diubah suai oleh tetingkap atau tab lain.

Dalam kes anda, memandangkan anda mengemas kini nilai localStorage dalam tetingkap yang sama, peristiwa storan tidak akan dicetuskan dan oleh itu komponen yang anda langgan tidak akan menerima kemas kini.

Untuk mengatasi had ini, anda boleh mengubah suai cangkuk tersuai anda untuk menggunakan mekanisme yang berbeza untuk memberitahu komponen yang melanggan tentang perubahan nilai Storan setempat. Satu pendekatan ialah menggunakan sistem acara berasingan (seperti API Konteks React atau perpustakaan pengurusan negeri seperti Redux) untuk mengendalikan komunikasi antara komponen.