Skip to main content

Exercise 26: Saving and Retrieving Data from LocalStorage

Master local storage with localStorage in JavaScript. Learn how to persistently save and retrieve data in the browser. The main goal is to learn how to save and retrieve JSON objects in localStorage.localStorageusing the methodssetItem and getItem

Activity​

  1. Create an object calledusuariowith the propertiesnombre,edad and email.

  2. Convert this object to JSON format usingJSON.stringify()and save it inlocalStorage3. Retrieve the data fromlocalStorageand convert them back to an object usingJSON.parse()4. Print the original object and the recovered object to the console to verify that it was saved and recovered correctly.

Solution​

Step 1: Create the index.html file​

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Guardar y Recuperar Datos de Usuario en localStorage</title>
  </head>
  <body>
    <h1>Ejercicio 26: Guardar y Recuperar Datos de Usuario en localStorage</h1>
    <p>Los cambios se muestran en consola.</p>
    <script src="script.js"></script>
  </body>
</html>

Step 2: Write the code in script.js​

JavaScript
// Paso 1: Crear el objeto usuario
const usuario = {
  nombre: "Juan Perez",
  edad: 25,
  email: "juan.perez@example.com",
};

// Paso 2: Convertir el objeto a JSON y guardarlo en localStorage
localStorage.setItem("usuario", JSON.stringify(usuario));

// Paso 3: Recuperar los datos y convertirlos de nuevo a un objeto
const usuarioRecuperado = JSON.parse(localStorage.getItem("usuario"));

// Paso 4: Imprimir en la consola los datos
console.log("Objeto original:", usuario);
console.log("Objeto recuperado de localStorage:", usuarioRecuperado);
info

🔎Check the sectionLocal Storage in JavaScriptwhere you will find more information on this topic.