Le concept de locale storage est essentiel pour les développeurs qui cherchent à stocker des données de manière persistante dans le navigateur. En utilisant localstorage react, on peut facilement sauvegarder et récupérer des informations entre les sessions de navigation, ce qui est particulièrement utile pour des fonctionnalités comme le mode sombre ou la sauvegarde automatique des formulaires.
Lorsque vous travaillez avec react localstorage, vous pouvez utiliser des hooks comme useState() et useEffect() pour gérer l’état et les effets secondaires liés au stockage local. Ces hooks permettent de synchroniser l’état de votre application avec local storage react de manière efficace et propre.
Mais local storage c’est quoi exactement ? Il s’agit d’une fonctionnalité du Web Storage qui permet de stocker des paires clé-valeur directement dans le navigateur de l’utilisateur. Cela permet de conserver des données entre les différentes sessions de navigation, ce qui est crucial pour des applications web modernes qui nécessitent une certaine persistance des données côté client.
Que sont les React Hooks ?
Les React Hooks sont des fonctions JavaScript que vous pouvez importer du paquet React pour ajouter des capacités à vos composants.
Les hooks permettent aux développeurs React d’utiliser des méthodes d’état et de cycle de vie au sein de composants fonctionnels. Ils fonctionnent également avec le code existant, ce qui les rend facilement adoptables dans une base de code.
Nous aurons besoin de deux hooks afin d’utiliser localStorage avec les hooks React :
useState()– L’état de votre application est assuré de changer à un moment donné. Le hookuseState()est une fonction qui accepte un paramètre, l’état initial (qui peut être la valeur d’une variable, d’un objet ou de tout autre type de données dans votre composant), et renvoie deux valeurs : l’état actuel et une fonction qui peut être utilisée pour mettre à jour l’état.useEffect()– Le crochet d’effet est activé par défaut après le premier rendu et chaque fois que l’état est modifié. Comme son nom l’indique, il est utilisé pour exécuter un effet chaque fois que l’état change. Ce hook est idéal pour configurer les écouteurs, récupérer des données de l’API et supprimer les écouteurs avant que le composant ne soit supprimé du DOM.
Comment implémenter localStorage dans React
localStorage nous permet d’accéder à l’objet de stockage d’un navigateur, qui comprend cinq méthodes :
setItem(): Cette méthode est utilisée pour ajouter une clé et une valeur à localStorage.getItem(): Cette méthode est utilisée pour obtenir un élément du localStorage à l’aide de la clé.removeItem() : Cette technique est utilisée pour supprimer un élément du localStorage en fonction de sa clé.clear(): Cette technique est utilisée pour supprimer toutes les instances de localStorage.key(): Lorsque vous fournissez un nombre, il facilite la récupération d’une clé de localStorage.
Dans ce billet, nous ne considérerons que les méthodes les plus populaires, qui sont les deux premières méthodes. Pour toute demande d’implémentation, n’hésitez pas à vous rapprocher d’une agence spécialisée sur react.
Comment utiliser la méthode setItem()
En donnant des valeurs à une clé, cette technique est utilisée pour stocker des objets dans localStorage. Cette valeur peut être de n’importe quel type de données, notamment un texte, un nombre entier, un objet, un tableau, etc.
Il est essentiel de se rappeler que, pour stocker des données dans localStorage, vous devez d’abord les stringifier à l’aide de la fonction JSON.stringify().
const [items, setItems] = useState([]) ;
useEffect(() => {
localStorage.setItem('items', JSON.stringify(items)) ;
}, [items]) ;Dans le code ci-dessus, nous avons d’abord créé un état et lui avons attribué un tableau vide (le vôtre pourrait être tout autre type de données). Ensuite, nous avons utilisé useEffect() pour ajouter des objets à localStorage chaque fois que la valeur de notre état change. Pour ce faire, nous avons passé l’état comme deuxième argument.
En gros, il s’agit du code principal responsable de l’ajout de paires clé-valeur au localStorage :
localStorage.setItem('items', JSON.stringify(items)) ;Pour faire simple, le code précédent nomme la clé (listes) et lui attribue ensuite une valeur, mais nous devions d’abord nous assurer que les données que nous ajoutions étaient une chaîne JSON.
Nous utilisons JSON.stringify() pour convertir un objet JSON en un texte JSON stocké dans une chaîne, qui peut ensuite être transmis au serveur Web.
Utilisation de la méthode getItem(
)
Cette méthode permet de récupérer des objets dans localStorage. Il existe d’autres méthodes pour accomplir cela avec React, mais nous allons utiliser le hook useEffect() car c’est le meilleur.
Le hook useEffect( ) nous aide à récupérer tous les éléments au premier rendu, ce qui signifie que lorsque le composant se monte ou se rend à nouveau, il obtient toutes nos données de localStorage.
Notez que c’est la raison pour laquelle nous avons passé un second argument vide.
const [items, setItems] = useState([]) ;
useEffect(() => {
const items = JSON.parse(localStorage.getItem('items')) ;
if (items) {
setItems(items) ;
}
}, []) ;Il est important de se rappeler que lorsque nous avons stocké les données, nous les avons d’abord converties en une chaîne JSON. Cela signifie que pour que nous puissions maintenant les utiliser, nous devons reconvertir la chaîne JSON en objet JSON. Pour ce faire, nous utilisons la méthode JSON.parse().
Conclusion
Dans cet article, nous avons appris comment utiliser localStorage avec les hooks React, quand l’utiliser et quel hook utiliser.
Si vous voulez voir comment cela fonctionne en pratique, vous pouvez obtenir le code source d’une application simple de liste de tâches qui utilise localStorage et ces hooks ici.