localStorage est un objet de stockage Web qui permet aux sites et aux applications JavaScript de conserver des paires clé-valeur dans un navigateur Web, sans date d’expiration.
Cela signifie que les données survivent aux rafraîchissements de page (sessionStorage) et même aux redémarrages du navigateur. Cela signifie que les données stockées dans le navigateur resteront même lorsque la fenêtre du navigateur est fermée.
En termes simples, le stockage local permet aux développeurs de stocker et de récupérer des données dans le navigateur.
Il est toutefois essentiel de comprendre que l’utilisation de localStorage comme base de données pour votre projet n’est pas une bonne pratique, car les données seront perdues lorsque l’utilisateur videra le cache, entre autres choses.
Les développeurs utilisent fréquemment localStorage pour ajouter une fonction de mode sombre à une application, sauvegarder un élément de tâche ou conserver les valeurs de saisie d’un formulaire par l’utilisateur, parmi de nombreux autres scénarios.
Dans ce billet, nous allons voir comment utiliser localStorage avec les crochets React pour définir et obtenir des éléments facilement.
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.
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.
