Cookies vs localStorage

01 — ¿Qué son las cookies?

▪ Las cookies son pequeños archivos de texto que un sitio web guarda en el navegador del usuario.

▪ Se envían automáticamente con cada petición HTTP(desde nuestro ordenador).

▪ Las páginas web están obligadas a avisarte y a preguntarte cuáles quieres instalar por la GDPR.

▪ Las cookies permiten recordar al usuario entre visitas o incluso entre páginas de una misma sesión.

▪ Puedes verlas desde las herramientas de desarrollador (F12 > Aplicación > Cookies en Chrome).

▪ En JS las cookies se crean como strings con el comando “document.cookie”

▪ Esa cookie se guarda en el navegador del usuario.

▪ El servidor o el JavaScript de la página puede leerlas y actuar en consecuencia.

Estructura:

nombre=valor; expires=fecha; path=/; domain=...;
secure; SameSite=...

document.cookie= "nombre=valor";

01 — Opciones adicionales

Propiedades de las cookies y lo que indican:

– Expires: Fecha de caducidad.

– Path: En que ruta de la web es valida.

– Domain: Para que dominio es válida.

– Secure: Solo enviarla en conexiones HTTPS.

– SameSite: Políticas de seguridad entre sitios.

document.cookie= «usuario=Juan; expires=Fri, 31 Dec2025 23:59:59 GMT; path=/»;
// Crea una cookie llamada usuario.

// Guarda el valor Juan.

// Expira el 31 de diciembre de 2025.

// Es válida para toda la web (path=/).

03 — Manejo de cookies

Leer cookies:

console.log(document.cookie);

* document.cookie devuelve todas las cookies juntas en una sola línea, separadas por punto y coma (;), no como un objeto.

Modificar:

document.cookie= «usuario=Ana; path=/»;

* Para modificar una cookie, basta volver a escribirla con el mismo nombre.

Eliminar:

document.cookie= «usuario=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;»;

* Para borrar una cookie se borra el valor y se pone su fecha de expiración en el pasado.

04 — ¿Qué es el localStorage?

▪ API del navegador que permite guardar información en el lado del cliente, de forma persistente (es decir, no se borra al cerrar el navegador).

▪ Permite guardar datos (como string) que no se envían al servidor.

▪ Más moderno y flexible que las tradicionales cookies.

▪ Cuenta con hasta 5 MB de almacenamiento y no tienen fecha de expiración.

▪ Forma parte del objeto Window (window.localStorage) pero normalmente se usa simplemente como localStorage.

Utilidad:

▪ Guardar temas o preferencias del usuario.

▪ Guardar el estado de una aplicación.

▪ Almacenar datos temporales o formularios.

▪ Carritos de compra.

▪ Guardar progreso de juegos web.

Usos del LocalStorage

Guardar:

localStorage.setItem(«usuario», «Juan»);

Leer:

let user = localStorage.getItem(«usuario»);

Eliminar:

localStorage.removeItem(«usuario»);

Limpiar:

localStorage.clear();

¡Todo se guarda como texto! Todo se guarda como string, incluso si se guarda un número o un array:

Code" copy-confirmed="Copied"]

localStorage.setItem("contador", 10);
// se guarda "10"

Para objetos o arrays, se usa JSON.stringify() y luego JSON.parse():

let persona = { nombre: «Ana», edad: 28 };

localStorage.setItem(«perfil», JSON.stringify(persona));
// Para leerlo de nuevo:

let perfil= JSON.parse(localStorage.getItem(«perfil»));

05 — Limitaciones  del localStorage

▪ No es seguro para almacenar contraseñas o información sensible.

▪ Solo se puede acceder desde JavaScript (no se envía al servidor).

▪ Puede ser borrado por el usuario en cualquier momento (limpieza de caché).

▪ Tiene un amplio límite de almacenamiento (~5MB, varía según navegador).

06 — Diferencias entre cookies y localStorage

– Capacidad: 4Kb las cookies y 5 Mb el localStorage.

– Envío al servidor: Las cookies hacen un envío por cada request y el localStorage no hace envíos al servidor.

– Expiración: Las cookies tiene fecha de caducidad, no así el localStorage.

– Seguridad: Las cookies son menos seguras (se pueden interceptar) mientras que el localStorage es más seguro ya que sólo tiene acceso desde JS.

Usos:

▪ Cookies: cuando necesitas mantener la sesión o enviar algo al servidor.

▪ LocalStorage: para guardar configuraciones del usuario, temas, estados del carrito, etc.