React : synchronisation avec le stockage local

Question

Ayez une application React. Certains composants définiront différentes valeurs de données sur le stockage local en utilisant la même clé sur une période donnée. Je dois m'abonner à plusieurs composants de ce projet dans le stockage local. Chaque fois qu'une valeur avec une clé spécifique est mise à jour dans le stockage local, les composants abonnés doivent être avertis ou recevoir la valeur mise à jour dans le stockage local.

J'ai essayé de créer un hook personnalisé pour cela et d'utiliser with en ajoutant un écouteur d'événement à l'événement storage comme indiqué ci-dessous.

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

et utilisez-le dans votre composant comme ceci :

const locationStored = useSyncLocalStorage('location');

J'ai essayé de mettre à jour la valeur de stockage local lors de l'événement click mais le hook ne renvoie pas la valeur mise à jour dans le stockage local. J'ai vérifié que la valeur du stockage local a été mise à jour dans les outils de développement. Le problème semble être que l'événement storage n'est pas déclenché dans la même fenêtre/onglet qui a provoqué le changement de stockage.

Existe-t-il un moyen de souscrire à la valeur du stockage local ?

Answer 1

L'approche que vous avez adoptée est correcte, mais vous avez raison, l'événement de stockage ne se déclenche pas dans la même fenêtre/onglet qui a provoqué la modification du stockage. L'événement de stockage est destiné à informer d'autres fenêtres ou onglets que le stockage a été modifié par une fenêtre ou un onglet différent.

Dans votre cas, puisque vous mettez à jour la valeur localStorage dans la même fenêtre, l'événement de stockage ne sera pas déclenché et donc le composant auquel vous êtes abonné ne recevra pas la mise à jour.

Pour surmonter cette limitation, vous pouvez modifier votre hook personnalisé pour utiliser un mécanisme différent pour informer les composants abonnés des modifications de la valeur localStorage. Une approche consiste à utiliser un système d'événements distinct (tel que l'API React Context ou une bibliothèque de gestion d'état comme Redux) pour gérer la communication entre les composants.