Aunque JavaScript en el navegador no fue inicialmente diseñado para almacenar grandes volúmenes de datos, existen dos mecanismos principales para persistencia en el lado del cliente:
Cookies:
Permiten guardar pequeñas cantidades de información, frecuentemente
utilizada para datos de autenticación como sesiones de usuario. Una
cookie es un fragmento de texto asociado a un dominio y, por razones de
seguridad, solo es accesible para ese mismo dominio.
LocalStorage y SessionStorage:
Estas interfaces, disponibles en navegadores modernos, ofrecen mayor
capacidad de almacenamiento.
Para facilitar el manejo de datos complejos (por ejemplo, objetos o arrays) en ambos métodos, es común utilizar JSON.
Dado que tanto Cookies como LocalStorage almacenan cadenas de texto,
JSON es la herramienta ideal para serializar datos complejos.
JSON (JavaScript Object Notation) es un formato de texto ligero para
representar estructuras de datos. Los dos métodos fundamentales son:
JSON.stringify(objeto)
Convierte un objeto (o array, o valor) a una cadena de texto
JSON.
JSON.parse(textoJSON)
Reconstruye un objeto o array a partir de una cadena JSON.
Ejemplo: Convertir y reconstruir un array
let frutas = ["manzana", "banana", "cereza"];
// Convertir a una cadena de texto JSON
let frutasJSON = JSON.stringify(frutas);
console.log(frutasJSON); // '["manzana","banana","cereza"]'
// Reconstruir el array a partir de la cadena JSON
let frutasRecuperadas = JSON.parse(frutasJSON);
console.log(frutasRecuperadas); // ["manzana", "banana", "cereza"]Definición:
Una cookie es un pequeño fragmento de información enviado por el
servidor y almacenado en el navegador del cliente. Se asocia a un
dominio, de manera que solo las páginas de ese dominio pueden acceder o
modificarla.
Uso Típico:
Frecuentemente se usan para la autenticación de usuarios (por ejemplo,
para implementar un “login automático”).
Para crear o modificar una cookie en JavaScript, se utiliza la
propiedad document.cookie, que acepta una cadena con el
siguiente formato:
"nombreVariable=valor; expires=fechaDeExpiración; path=/" nombreVariable: Nombre identificador
de la cookie.valor: Contenido asignado a la
cookie.expires: Fecha de expiración. (Para
eliminar una cookie, se asigna una fecha pasada.)path: Ruta en la que la cookie es
válida (por ejemplo, / para que sea accesible en todo el
dominio).Ejemplo: Crear una cookie
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";Para facilitar la gestión de cookies, es recomendable utilizar funciones helper. A continuación se muestran ejemplos de funciones comunes:
setCookie)function setCookie(cname, cvalue, exdays) {
const fecha = new Date();
fecha.setTime(fecha.getTime() + (exdays * 24 * 60 * 60 * 1000)); // exdays en milisegundos
const expires = "expires=" + fecha.toUTCString();
document.cookie = `${cname}=${cvalue}; ${expires}; path=/`;
}
// Ejemplo: Crear una cookie "usuario" que expire en 7 días
setCookie("usuario", "Juan", 7);getCookie)function getCookie(cname) {
const nombre = cname + "=";
const cookies = document.cookie.split(';');
for(let i = 0; i < cookies.length; i++) {
let c = cookies[i].trim();
if (c.indexOf(nombre) === 0) {
return c.substring(nombre.length, c.length);
}
}
return "";
}
// Ejemplo: Obtener el valor de la cookie "usuario"
console.log(getCookie("usuario"));deleteCookie)function deleteCookie(cname) {
// Para eliminar una cookie, se establece su fecha de expiración en el pasado.
setCookie(cname, "", -1);
}
// Ejemplo: Eliminar la cookie "usuario"
deleteCookie("usuario");checkCookieUn ejemplo común es comprobar si una cookie existe y, en caso contrario, pedir al usuario un dato para establecerla. Por ejemplo:
function checkCookie() {
let user = getCookie("username");
if (user !== "") {
alert("¡Bienvenido de nuevo, " + user + "!");
} else {
user = prompt("Por favor, ingresa tu nombre:", "");
if (user !== "" && user != null) {
setCookie("username", user, 365);
}
}
}
checkCookie();LocalStorage es una tecnología de almacenamiento web disponible en navegadores modernos que permite guardar información en el navegador del cliente de manera persistente, incluso después de cerrar la ventana o pestaña. Por lo general, el límite de almacenamiento es de al menos 5 MB, aunque depende del navegador.
Similar a LocalStorage, pero la información almacenada en
sessionStorage se mantiene solo durante la sesión actual.
Se borra al cerrar la ventana o pestaña.
Ambos objetos utilizan los mismos métodos básicos:
setItem(clave, valor):
Guarda un par clave-valor. Tanto la clave como el valor se almacenan
como cadenas de texto.
getItem(clave):
Recupera el valor asociado a una clave determinada. Si la clave no
existe, devuelve null.
removeItem(clave):
Elimina el par clave-valor de la clave especificada.
Ejemplo Práctico con LocalStorage
// Guardar un valor en localStorage
localStorage.setItem("apellido", "García");
// Recuperar el valor almacenado
alert(localStorage.getItem("apellido")); // Mostrará "García"
// Eliminar el valor almacenado
localStorage.removeItem("apellido");
// Comprobar la eliminación
alert(localStorage.getItem("apellido")); // Mostrará nullPara almacenar objetos o arrays, basta con serializarlos a JSON antes de guardarlos y, al recuperarlos, parsear la cadena JSON:
// Objeto a almacenar
let usuario = { nombre: "Carlos", edad: 30 };
// Guardar en localStorage convirtiéndolo a cadena JSON
localStorage.setItem("usuario", JSON.stringify(usuario));
// Recuperar y reconstruir el objeto
let usuarioRecuperado = JSON.parse(localStorage.getItem("usuario"));
console.log(usuarioRecuperado.nombre); // "Carlos"