Introduction
Lors du développement d'applications légères, nous souhaitons peut-être stocker certaines données. Si une base de données est exagérée, il existe une excellente alternative : localStorage!
Bien qu'il ne remplace pas une base de données à des fins de base de données, il sert de système de stockage basé sur des fichiers simple que vous pouvez exploiter pour stocker des points de données facilement accessibles.
Dans cet article, nous allons apprendre à utiliser
localStoragepour stocker facilement des données dans notre navigateur. Ces données sont enregistrées sous paires clé-valeur que l'utilisateur peut facilement récupérer.
Enregistrement des données dans localStorage dans React c'est super facile :
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Si vous n'êtes pas pressé et que vous souhaitez en savoir plus sur son fonctionnement, continuez à lire !
Qu’est ce qu' stockage local?
localStorage est un objet de stockage Web qui permet aux développeurs de stocker paires clé-valeur dans un navigateur Web et garantit que ces données survivent à toutes les actualisations de page, même lorsqu'un utilisateur ferme ou redémarre un navigateur - et elles n'ont pas de date d'expiration. Les paires clé-valeur stockées peuvent inclure n'importe quel type de données - tableaux, objets, chaînes, nombres et bien d'autres.
Cependant, cela ne peut pas remplacer le rôle des bases de données dans vos sites Web et applications Web, car les données sont perdues lorsqu'un utilisateur efface le cache et le stockage local du navigateur - en fin de compte, c'est stockage local et doit être utilisé comme tel. Néanmoins, il existe des situations dans lesquelles un utilisateur peut utiliser localStorage, comme la mise en œuvre de la Mode sombre fonction, la persistance de la valeur d'entrée du formulaire d'un utilisateur, et bien d'autres.
localStorage a des méthodes intégrées qui nous permettent d'accéder à l'objet de stockage du navigateur. Un exemple est le setItem() méthode, qui nous permet d'ajouter une clé et une valeur à localStorage, nous permettant ainsi de stocker des données. D'autres méthodes sont utilisées pour récupérer des données - getItem(), Suprimmer les données - removeItem(), tout effacer localStorage instances - clear(), Et ainsi de suite.
Stockage des données dans stockage local Avec la setItem() Method
Les setItem() nous permet d'enregistrer des valeurs de n'importe quel type de données dans localStorage en attribuant des valeurs aux clés, ce qui entraîne un paire clé-valeur. Cette clé serait utilisée pour récupérer la valeur correspondante chaque fois que nous voulons la récupérer à partir de localStorage.
Remarque: Afin de stocker des données dans localStorage, nous devons d'abord le convertir en Chaîne JSON utilisant l' JSON.stringify() fonction. Et quand nous voudrons le récupérer, nous analyserons les données en utilisant JSON.parse(), en reconvertissant la chaîne JSON en un Objet JSON.
Lorsque nous travaillons avec des données dans React, nous utilisons fréquemment crochets pour nous aider à le stocker/tenir. Les crochets peuvent également nous aider à trouver où télécharger ces données. Ceci s'applique également à localStorage parce que nous allons utiliser le useState() ainsi que le useEffect() crochets. Ces crochets sont essentiels parce que le useState() crochet est utilisé pour contenir et définir des données, tandis que le useEffect() hook est déclenché par défaut après le premier rendu et chaque fois que l'état passé en tant que deuxième paramètre change.
Après avoir expliqué la base, voici le code que nous utiliserions pour stocker les données dans localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Nous avons d'abord créé un état pour contenir les données que nous voulons stocker dans notre localStorage, puis nous avons créé un useEffect() crochet, en passant l'état comme deuxième paramètre. Ainsi, chaque fois que l'état change, les données du localStorage est mis à jour à la valeur actuelle.
Nous avons géré la fonctionnalité de base, qui est utilisée pour nous aider dans le stockage des données, dans le useEffect() accrocher:
localStorage.setItem('dataKey', JSON.stringify(data));
Conclusion
Dans cet article, nous avons appris à utiliser les crochets React pour stocker des données dans React en utilisant localStorage. Comme indiqué précédemment, cela ne remplacera jamais le rôle d'une base de données, mais nous aidera plutôt à stocker certaines données relatives à l'utilisateur qui peuvent améliorer l'interface utilisateur mais ne sont pas destinées à être conservées indépendamment du navigateur.
