Comprendre le stockage local en JavaScript

Local Storage est une API essentielle basée sur un navigateur qui permet aux développeurs de stocker, récupérer et gérer des données directement dans le navigateur. Contrairement au stockage de session, le stockage local persiste même après la fermeture du navigateur, ce qui le rend idéal pour enregistrer les préférences utilisateur, les paramètres d'application ou tout type de données devant rester entre les sessions. Il est toutefois important de noter que les données sont limitées au navigateur dans lequel elles sont stockées. Par exemple, les données enregistrées dans Chrome ne seront pas disponibles dans Firefox.

Comment fonctionne le stockage local

Avant de travailler avec Local Storage, il est important de comprendre qu'il stocke les données au format JSON. Cela signifie que si vous enregistrez un objet JavaScript, vous devrez d'abord le convertir en JSON, puis le reconvertir en objet JavaScript lors de la récupération des données.

Voici un exemple :

const user = {
  name: "AliceDoe"
};
const userToJSON = JSON.stringify(user); // Convert object to JSON

Affichage du stockage local dans votre navigateur

Vous pouvez afficher et interagir avec les données stockées dans le stockage local à l'aide des Outils de développement de votre navigateur. Voici un guide rapide :

1. Faites un clic droit sur n'importe quelle page Web et sélectionnez « Inspecter » ou appuyez sur F12.
2. Ouvrez l'onglet Application.
3. Dans le panneau de gauche, recherchez Stockage local sous la section de stockage et vous verrez vos données stockées affichées sous forme de paires clé-valeur.

Création d'un nouvel enregistrement dans le stockage local

Pour stocker des données dans le stockage local, suivez ces étapes :

const user = {
  name: "AliceDoe"
};

const userToJSON = JSON.stringify(user); // Convert to JSON
localStorage.setItem("user", userToJSON); // Save the item

Dans cet exemple :

• La clé est "utilisateur".
• La valeur est l'objet stringifié au format JSON.

Lecture de données à partir du stockage local

Lorsque vous récupérez des données du stockage local, vous devrez reconvertir la chaîne JSON en un objet JavaScript :

const userJSON = localStorage.getItem("user"); // Retrieve data
const userObject = JSON.parse(userJSON); // Convert back to JS object
console.log(userObject); // { name: "AliceDoe" }

Mise à jour des données existantes dans le stockage local

La mise à jour des données dans le stockage local est similaire à la création d'un nouvel enregistrement : en gros, vous écrasez les anciennes données :

const updatedUser = {
  name: "AliceDoe",
  age: 25
};

const updatedUserJSON = JSON.stringify(updatedUser);
localStorage.setItem("user", updatedUserJSON); // Overwrite the record

Suppression de données du stockage local

Enfin, pour supprimer un enregistrement du stockage local, vous pouvez utiliser la méthode removeItem :

localStorage.removeItem("user"); // Remove the "user" record

Cela supprimera l'enregistrement associé à la clé "utilisateur".

Conclusion

Local Storage est un outil puissant et facile à utiliser pour la persistance des données côté client en JavaScript. En comprenant comment créer, lire, mettre à jour et supprimer des enregistrements, vous pouvez stocker des données importantes qui persistent au fil des sessions du navigateur, améliorant ainsi l'expérience utilisateur. Cependant, il est également important de se rappeler que le stockage local est limité à un navigateur et à un domaine spécifiques et qu'il ne doit pas être utilisé pour des données sensibles, car elles ne sont pas cryptées.

En intégrant le stockage local dans vos applications, vous pouvez améliorer leurs fonctionnalités sans avoir besoin d'une solution backend complète pour certaines tâches.

Citations :

• MDN Web Docs, "LocalStorage", https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

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!