Sobes.tech
Junior

Explica la diferencia entre cookies, sessionStorage y localStorage.

sobes.tech AI

Respuesta de la IA

Ámbito de aplicación: Las cookies están disponibles tanto en el lado del cliente como en el del servidor. sessionStorage y localStorage solo están disponibles en el lado del cliente.

Tiempo de vida: Para las cookies, el tiempo de vida se establece al crearlas (usando el atributo expires o max-age). Si no se especifica, la cookie se elimina al cerrar el navegador. sessionStorage almacena datos solo durante la sesión actual (hasta cerrar la pestaña o la ventana del navegador). localStorage almacena datos indefinidamente, hasta que se eliminen explícitamente.

Tamaño: El tamaño máximo para las cookies es de aproximadamente 4 KB. Para sessionStorage y localStorage, de 5 MB a 10 MB, dependiendo del navegador.

Envío con cada solicitud: Las cookies se envían automáticamente con cada solicitud HTTP al dominio para el cual están configuradas, lo que puede aumentar el tráfico. Los datos en sessionStorage y localStorage no se envían al servidor.

Modo de acceso: El acceso a las cookies se realiza a través de document.cookie (cadena). El acceso a sessionStorage y localStorage se realiza mediante los objetos correspondientes usando los métodos setItem, getItem, removeItem y clear.

// Establecer cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// Obtener cookie
let x = document.cookie;

// Establecer datos en sessionStorage
sessionStorage.setItem("lastname", "Smith");

// Obtener datos de sessionStorage
let y = sessionStorage.getItem("lastname");

// Establecer datos en localStorage
localStorage.setItem("firstname", "Jane");

// Obtener datos de localStorage
let z = localStorage.getItem("firstname");
Característica cookies sessionStorage localStorage
Ámbito de aplicación Cliente y Servidor Solo Cliente Solo Cliente
Tiempo de vida Establecido al crear (expires/max-age), o hasta cerrar el navegador Hasta cerrar la pestaña/ventana del navegador Indefinido (hasta que se elimine explícitamente)
Tamaño ~4 KB ~5-10 MB (depende del navegador) ~5-10 MB (depende del navegador)
Envío con la solicitud No No
Acceso document.cookie sessionStorage.getItem/setItem localStorage.getItem/setItem