Volver al inicio
Lección 15

localStorage

Aprende a guardar datos en el navegador para que persistan incluso después de cerrar la página.

1. ¿Qué es localStorage?

localStorage es un espacio de almacenamiento en el navegador que te permite guardar datos de forma permanente.

Los datos se guardan como pares clave-valor (como un objeto) y permanecen aunque cierres el navegador.

Ventajas

  • • Los datos persisten aunque cierres el navegador
  • • Fácil de usar (solo 4 métodos principales)
  • • No requiere configuración
  • • Disponible en todos los navegadores modernos

Limitaciones

  • • Máximo 5-10 MB de datos
  • • Solo guarda texto (strings)
  • • Específico para cada dominio
  • • Puede ser borrado por el usuario

2. Métodos principales

localStorage.setItem() - Guardar datos

setItem.jsjavascript
1// Guardar un valor
2localStorage.setItem('nombre', 'Juan');
3localStorage.setItem('edad', '25');
4localStorage.setItem('ciudad', 'Madrid');
5 
6console.log('Datos guardados');

localStorage.getItem() - Obtener datos

getItem.jsjavascript
1// Obtener un valor
2const nombre = localStorage.getItem('nombre');
3const edad = localStorage.getItem('edad');
4 
5console.log('Nombre:', nombre); // "Juan"
6console.log('Edad:', edad);     // "25"
7 
8// Si la clave no existe, devuelve null
9const apellido = localStorage.getItem('apellido');
10console.log(apellido); // null

localStorage.removeItem() - Eliminar un dato

removeItem.jsjavascript
1// Eliminar un dato específico
2localStorage.removeItem('edad');
3 
4console.log(localStorage.getItem('edad')); // null

localStorage.clear() - Borrar todo

clear.jsjavascript
1// Eliminar TODOS los datos del localStorage
2localStorage.clear();
3 
4console.log('Todo el localStorage ha sido borrado');

3. Guardar objetos y arrays

Problema: localStorage solo guarda texto (strings). Para guardar objetos o arrays necesitas convertirlos.

Solución: Usa JSON.stringify() para guardar y JSON.parse() para recuperar.

Guardar un objeto:

guardar-objeto.jsjavascript
1// Objeto que queremos guardar
2const usuario = {
3  nombre: 'Ana',
4  edad: 28,
5  email: 'ana@example.com',
6  premium: true
7};
8 
9// GUARDAR: Convertir a string con JSON.stringify()
10localStorage.setItem('usuario', JSON.stringify(usuario));
11 
12console.log('Usuario guardado');

Recuperar el objeto:

recuperar-objeto.jsjavascript
1// OBTENER: Convertir de string a objeto con JSON.parse()
2const usuarioGuardado = localStorage.getItem('usuario');
3const usuario = JSON.parse(usuarioGuardado);
4 
5console.log(usuario.nombre);   // "Ana"
6console.log(usuario.edad);     // 28
7console.log(usuario.premium);  // true

Guardar un array:

guardar-array.jsjavascript
1// Array de tareas
2const tareas = [
3  { id: 1, texto: 'Estudiar JavaScript', completada: false },
4  { id: 2, texto: 'Hacer ejercicio', completada: true },
5  { id: 3, texto: 'Leer un libro', completada: false }
6];
7 
8// Guardar
9localStorage.setItem('tareas', JSON.stringify(tareas));
10 
11// Recuperar
12const tareasGuardadas = JSON.parse(localStorage.getItem('tareas'));
13console.log(tareasGuardadas); // Array con las 3 tareas

¡Error común! Si intentas guardar un objeto directamente sin JSON.stringify(), se guardará como "[object Object]" y perderás todos los datos.

4. Ejemplo práctico: Contador persistente

Vamos a crear un contador que guarda su valor y lo mantiene aunque recargues la página.

contador-persistente.jsjavascript
1// Obtener el contador guardado o iniciar en 0
2let contador = parseInt(localStorage.getItem('contador')) || 0;
3 
4// Mostrar el valor actual
5console.log('Contador actual:', contador);
6 
7// Función para incrementar
8function incrementar() {
9  contador++;
10  localStorage.setItem('contador', contador);
11  console.log('Contador:', contador);
12}
13 
14// Función para resetear
15function resetear() {
16  contador = 0;
17  localStorage.setItem('contador', 0);
18  console.log('Contador reseteado');
19}
20 
21// Probar
22incrementar(); // 1
23incrementar(); // 2
24incrementar(); // 3
25// Si recargas la página, el contador sigue en 3

5. localStorage vs sessionStorage

localStorage

  • Los datos persisten para siempre
  • Se mantiene aunque cierres el navegador
  • Compartido entre todas las pestañas del mismo dominio
  • Ideal para: preferencias, temas, datos de usuario

sessionStorage

  • Los datos duran solo mientras la pestaña esté abierta
  • Se borra al cerrar la pestaña
  • No se comparte entre pestañas
  • Ideal para: datos temporales de sesión

Mismo uso, diferente duración:

storage-comparison.jsjavascript
1// localStorage - persiste para siempre
2localStorage.setItem('tema', 'oscuro');
3 
4// sessionStorage - se borra al cerrar la pestaña
5sessionStorage.setItem('temp', 'valor temporal');
6 
7// Los métodos son idénticos:
8// .setItem(), .getItem(), .removeItem(), .clear()

Ejercicio práctico

Lista de Tareas con localStorage

Crea una aplicación de lista de tareas que guarde las tareas en localStorage para que no se pierdan al recargar la página.

1 HTML: Estructura básica

Crea un archivo HTML con:

  • ▸ Un input con id nueva-tarea para escribir tareas
  • ▸ Un botón con id agregar-btn para agregar tareas
  • ▸ Un ul con id lista-tareas para mostrar las tareas
  • ▸ Un botón con id limpiar-btn para borrar todas las tareas

2 JavaScript: Funcionalidad

2.1 Cargar tareas al inicio

  • • Al cargar la página, obtén las tareas de localStorage
  • • Si no hay tareas guardadas, inicia con un array vacío []
  • • Usa JSON.parse() para convertir el string a array

2.2 Función para agregar tarea

  • • Obtén el texto del input
  • • Agrégalo al array de tareas con .push()
  • • Guarda el array en localStorage con JSON.stringify()
  • • Llama a la función que renderiza la lista

2.3 Función para renderizar tareas

  • • Limpia el ul con innerHTML = ''
  • • Recorre el array de tareas con forEach
  • • Para cada tarea, crea un li y agrégalo al ul

2.4 Función para limpiar todas las tareas

  • • Borra las tareas de localStorage con removeItem()
  • • Limpia el array (asígnale [])
  • • Renderiza la lista vacía

3 Probar la persistencia

  • • Agrega varias tareas
  • • Recarga la página (F5)
  • • Las tareas deben seguir ahí
  • • Abre DevTools → Application → Local Storage para ver los datos guardados

Tip: Usa una clave descriptiva como 'tareas' o 'misTareas' para guardar en localStorage

Extra: Agrega un botón para eliminar tareas individuales (más avanzado)

Resumen

✓ localStorage guarda datos permanentemente en el navegador
✓ 4 métodos principales: setItem(), getItem(), removeItem(), clear()
✓ Usa JSON.stringify() para guardar objetos y JSON.parse() para recuperarlos
✓ localStorage persiste aunque cierres el navegador, sessionStorage solo dura la sesión
✓ Ideal para guardar preferencias, configuraciones, y datos del usuario
Anterior: Fetch API Volver al inicio