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?