Stockage et récupération de données

Introduction

Dans ce laboratoire, nous accompagnons Alex, un développeur web déterminé dans une jeune startup technologique en pleine expansion, qui entre maintenant dans le domaine de la persistance des données. Après avoir créé avec succès un mécanisme de suivi et d'affichage des enregistrements financiers dans le logiciel de suivi des finances personnelles, le prochain défi est de s'assurer que ces enregistrements persistent au cours des sessions de navigateur. Le but est de permettre aux utilisateurs de revenir sur l'application et de retrouver toutes les données qu'ils ont précédemment entrées intacts, améliorant ainsi la convivialité de l'application et la satisfaction des utilisateurs. Cette tâche introduit Alex au concept de stockage web, en particulier en utilisant l'API localStorage pour enregistrer et récupérer l'état de l'application.

Dans ce laboratoire, vous allez apprendre à utiliser localStorage pour stocker des données localement dans le navigateur de l'utilisateur, permettant une persistance des données dans les applications web.

Points de connaissance:

• Utilisation de localStorage
• Sérialisation et désérialisation JSON (JSON.stringify, JSON.parse)

LocalStorage

localStorage offre un mécanisme pour stocker des données de session côté client, avec des limites de stockage généralement d'environ 5 Mo. Contrairement au stockage de session (sessionStorage), les données dans localStorage ne disparaissent pas lorsque la session prend fin.

Stockage de données

La méthode setItem() vous permet de stocker des données dans localStorage. Cette méthode prend deux paramètres : une clé et une valeur.

Par exemple :

localStorage.setItem("username", "Alice");

Récupération de données

La méthode getItem() est utilisée pour lire des données dans localStorage. Cette méthode prend un paramètre : la clé.

Par exemple :

localStorage.setItem("username", "Alice");
let username = localStorage.getItem("username");
console.log(username); // Affiche : Alice

Sauvegarde des enregistrements dans LocalStorage

Dans cette étape, vous allez travailler avec Alex pour implémenter une fonctionnalité qui sauvegarde le tableau d'enregistrements financiers dans localStorage chaque fois qu'un nouvel enregistrement est ajouté. Cela garantit que les données de l'utilisateur sont stockées localement sur leur appareil, et qu'elles sont disponibles même après que le navigateur ait été fermé ou rafraîchi.

Au début de script.js, avant de définir la fonction addFinancialRecord, ajoutez le code suivant pour charger les enregistrements sauvegardés à partir de localStorage et initialiser le tableau financialRecords :

Modifiez script.js pour charger les enregistrements à partir de localStorage :

document.addEventListener("DOMContentLoaded", function () {
  let records = JSON.parse(localStorage.getItem("records")) || [];
});

• La méthode statique JSON.parse() analyse une chaîne JSON, construisant la valeur ou l'objet JavaScript décrit par la chaîne. Une fonction de ravivification optionnelle peut être fournie pour effectuer une transformation sur l'objet résultant avant qu'il ne soit renvoyé.

Mettre en œuvre la persistance des enregistrements

Ajoutez la logique pour stocker l'enregistrement dans localStorage dans la fonction addRecord :

document.addEventListener("DOMContentLoaded", function () {
  const saveRecords = () => {
    localStorage.setItem("records", JSON.stringify(records));
    renderRecords();
  };

  const addRecord = (description, amount, type) => {
    records.push({ description, amount, type });
    saveRecords();
  };
});

Maintenant, chaque fois qu'un nouvel enregistrement financier est ajouté, il sera enregistré dans localStorage, ce qui assure la persistance des données.

Ensuite, nous devons implémenter la fonction de suppression de la comptabilité. Avant d'écrire la fonction de suppression, nous devons apprendre une nouvelle méthode d'opération sur les tableaux.

Méthode splice

La méthode splice() peut prendre trois paramètres : la position de départ, le nombre d'éléments à supprimer et les nouveaux éléments à ajouter.

Syntaxe :

array.splice(start, deleteCount, item1, item2,...)

• start : L'index à partir duquel commencer à modifier le tableau.
• deleteCount : Le nombre d'éléments à supprimer. Si aucun élément n'est à supprimer, cela doit être 0.
• item1, item2,... : Les nouveaux éléments à ajouter au tableau.

Suppression d'éléments

Pour supprimer des éléments d'un tableau, définissez le paramètre deleteCount sans avoir besoin d'ajouter de nouveaux éléments.

let fruits = ["Apple", "Banana", "Cherry", "Date"];
fruits.splice(1, 2); // Supprime 2 éléments en commençant à l'index 1
console.log(fruits); // Affiche : ['Apple', 'Date']

Ajout d'éléments

splice() peut également ajouter des éléments à une position spécifique dans le tableau sans supprimer aucun élément. Définissez deleteCount sur 0 et spécifiez les éléments à ajouter.

let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(2, 0, "Date"); // Ajoute 'Date' à l'index 2
console.log(fruits); // Affiche : ['Apple', 'Banana', 'Date', 'Cherry']

Remplacement d'éléments

En définissant deleteCount et en ajoutant de nouveaux éléments, splice() peut à la fois supprimer et ajouter des éléments, remplaçant ainsi les éléments existants.

let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(1, 1, "Date"); // Remplace 1 élément à l'index 1 par 'Date'
console.log(fruits); // Affiche : ['Apple', 'Date', 'Cherry']

Ajouter la possibilité de supprimer des enregistrements

Ajoutez la possibilité de supprimer des enregistrements.

Écrivez le code suivant dans le fichier script.js :

document.addEventListener("DOMContentLoaded", function () {
  window.deleteRecord = (index) => {
    records.splice(index, 1);
    saveRecords();
  };
});

Résumé

Dans ce laboratoire, vous et Alex avez relevé le défi de la persistance des données dans l'application de suivi des finances personnelles. En apprenant à utiliser l'API localStorage, vous avez permis à l'application de sauvegarder et de récupérer des enregistrements financiers au cours de sessions de navigateur, améliorant considérablement l'expérience utilisateur. Cette introduction au stockage web ouvre de nouvelles possibilités pour la création d'applications web plus complexes et conviviales.

Au travers de pratiques pratiques, vous avez vu comment les données peuvent être sérialisées au format chaîne à l'aide de JSON.stringify pour le stockage puis désérialisées à nouveau en objets JavaScript à l'aide de JSON.parse pour la récupération. Ce processus est crucial pour la gestion de l'état de l'application dans le développement web côté client, formant une compétence de base qui vous aidera dans vos futurs projets de développement web.