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 | Sí | No | No |
| Acceso | document.cookie |
sessionStorage.getItem/setItem |
localStorage.getItem/setItem |