Gestion du stockage local dans React avec useLocalStorage Hook

Cet article montre la création d'un hook useLocalStorage React réutilisable pour une gestion efficace du stockage local. Cela simplifie la gestion des données persistantes dans vos applications React, offrant une approche propre et sécurisée.

1. Fonctions de l'utilitaire de stockage local

Avant de créer le hook, nous construisons des fonctions d'assistance pour interagir avec localStorage :

• setItem(key: string, value: unknown) : Stocke les données en toute sécurité dans localStorage. Il sérialise la valeur à l'aide de JSON.stringify et gère les erreurs potentielles (comme le dépassement des limites de stockage) en les enregistrant dans la console.

• getItem<T>(key: string): T | undefined : Récupère et analyse les données de localStorage. Il utilise des génériques TypeScript (<T>) pour la sécurité des types, renvoyant undefined si la clé n'existe pas. La gestion des erreurs est incluse.

• removeItem(key: string) : Supprime une paire clé-valeur de localStorage, également avec gestion des erreurs.

2. Le useLocalStorageCrochet

Le cœur de cette solution est le useLocalStorage hook :

• Initialisation : Le hook prend un key (pour localStorage) et un initialValue comme paramètres. Il initialise son état en utilisant useState, en vérifiant localStorage les données existantes ; s'il n'est pas trouvé, il utilise initialValue.

• Mises à jour de l'état (handleDispatch) : Cette fonction met à jour à la fois l'état du composant et localStorage. Il accepte soit une nouvelle valeur, soit une fonction (pour une mise à jour en fonction de l'état précédent), assurant la synchronisation.

• Effacement de l'état (clearState) : Cette fonction réinitialise l'état à undefined et supprime l'élément de localStorage.

• Valeur de retour : Le hook renvoie un tableau : [value, handleDispatch, clearState], donnant accès à la valeur actuelle, à la fonction de mise à jour et à la fonction d'effacement.

3. Utiliser le crochet

Voici comment utiliser useLocalStorage dans un composant React :

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

Cet exemple illustre la fonctionnalité de compteur persistant. La valeur count est stockée dans localStorage et survit aux rechargements de page.

Code complet (localStorage.ts et useLocalStorage.ts)

Le code complet pour localStorage.ts et useLocalStorage.ts est fourni dans l'entrée d'origine et reste inchangé.

Conclusion

Ce crochet personnalisé fournit une solution robuste, de type type et réutilisable pour gérer les données persistantes dans les applications React en utilisant localStorage. Son API propre simplifie le développement et améliore la maintenabilité du code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!