Introducción a LocalStorage

Almacenamiento Local en el Navegador

LocalStorage permite guardar datos en el navegador, sin necesidad de bases de datos externas y con persistencia incluso después de cerrar el navegador.

1. ¿Qué es LocalStorage?

LocalStorage es una API de almacenamiento de datos del navegador que permite guardar pares clave-valor en el navegador del usuario de manera persistente.

Capacidad de almacenamiento: hasta 5 MB.
Los datos se mantienen hasta que el usuario los elimine manualmente.

2. Almacenamiento de Datos

Usa localStorage.setItem() para guardar datos en el navegador.

// Guardar un dato
localStorage.setItem('nombre', 'Juan');

Este código almacena "Juan" con la clave "nombre".

3. Recuperación de Datos

Utiliza localStorage.getItem() para recuperar datos almacenados.

// Recuperar un dato
let nombre = localStorage.getItem('nombre');
console.log(nombre); // Muestra "Juan"

4. Eliminación de Datos

Puedes eliminar un dato específico o limpiar todo el almacenamiento:

Para un elemento específico: localStorage.removeItem('nombre')
Para limpiar todo: localStorage.clear()

// Eliminar un solo elemento
localStorage.removeItem('nombre');

// Limpiar todo el almacenamiento
localStorage.clear();

5. Limitaciones de LocalStorage

No es seguro para almacenar información sensible (no está encriptado).
Limitado a un tamaño máximo de aproximadamente 5 MB.
Sólo puede almacenar datos en formato de cadena de texto (string).

Para almacenar objetos, usa JSON:

// Convertir a JSON para almacenar objetos
let usuario = {nombre: "Juan", edad: 30};
localStorage.setItem('usuario', JSON.stringify(usuario));

// Convertir de JSON al recuperar
let usuarioRecuperado = JSON.parse(localStorage.getItem('usuario'));

Conclusión

LocalStorage es una opción útil para almacenar datos temporales y simples en el navegador. Es ideal para aplicaciones web que requieren almacenamiento básico y persistente.