Cookies JavaScript
Las cookies le permiten almacenar información del usuario en las páginas web.
¿Qué son las cookies?
Las cookies son datos, almacenados en pequeños archivos de texto, en su computadora.
Cuando un servidor web ha enviado una página web a un navegador, la conexión se cierra y el servidor se olvida de todo sobre el usuario.
Las cookies se inventaron para resolver el problema "cómo recordar información sobre el usuario":
- Cuando un usuario visita una página web, su nombre puede almacenarse en una cookie.
- La próxima vez que el usuario visite la página, la cookie "recordará" su nombre.
Las cookies se guardan en pares de nombre-valor como:
username = John Doe
Cuando un navegador solicita una página web de un servidor, las cookies que pertenecen a la página se agregan a la solicitud. De esta forma, el servidor obtiene los datos necesarios para "recordar" información sobre los usuarios.
Ninguno de los ejemplos a continuación funcionará si su navegador tiene desactivado el soporte de cookies locales.
Crear una cookie con JavaScript
JavaScript puede crear, leer y eliminar cookies con la document.cookie
propiedad.
Con JavaScript, se puede crear una cookie como esta:
document.cookie = "username=John Doe";
También puede agregar una fecha de caducidad (en hora UTC). Por defecto, la cookie se elimina cuando se cierra el navegador:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
Con un parámetro de ruta, puede decirle al navegador a qué ruta pertenece la cookie. Por defecto, la cookie pertenece a la página actual.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Leer una cookie con JavaScript
Con JavaScript, las cookies se pueden leer así:
let x = document.cookie;
document.cookiedevolverá todas las cookies en una cadena como: cookie1=valor; galleta2=valor; cookie3=valor;
Cambiar una cookie con JavaScript
Con JavaScript, puede cambiar una cookie de la misma manera que la crea:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
La cookie anterior se sobrescribe.
Eliminar una cookie con JavaScript
Eliminar una cookie es muy sencillo.
No tiene que especificar un valor de cookie cuando elimina una cookie.
Simplemente establezca el parámetro de expiración en una fecha pasada:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC; path=/;";
Debe definir la ruta de la cookie para asegurarse de eliminar la cookie correcta.
Algunos navegadores no le permitirán eliminar una cookie si no especifica la ruta.
La cadena de galletas
La document.cookiepropiedad parece una cadena de texto normal. Pero no lo es.
Incluso si escribe una cadena completa de cookies en document.cookie, cuando la vuelva a leer, solo podrá ver el par nombre-valor.
Si configura una nueva cookie, las cookies anteriores no se sobrescriben. La nueva cookie se agrega a document.cookie, por lo que si vuelve a leer document.cookie obtendrá algo como:
galleta1 = valor; cookie2 = valor;
Si desea encontrar el valor de una cookie específica, debe escribir una función de JavaScript que busque el valor de la cookie en la cadena de la cookie.
Ejemplo de cookies de JavaScript
En el ejemplo a seguir, crearemos una cookie que almacena el nombre de un visitante.
La primera vez que un visitante llega a la página web, se le pedirá que introduzca su nombre. A continuación, el nombre se almacena en una cookie.
La próxima vez que el visitante llegue a la misma página, recibirá un mensaje de bienvenida.
Para el ejemplo crearemos 3 funciones de JavaScript:
- Una función para establecer un valor de cookie
- Una función para obtener un valor de cookie.
- Una función para comprobar el valor de una cookie.
Una función para establecer una cookie
Primero, creamos una functionvariable que almacena el nombre del visitante en una cookie:
Ejemplo
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Ejemplo explicado:
Los parámetros de la función anterior son el nombre de la cookie (cname), el valor de la cookie (cvalue) y el número de días hasta que caduque la cookie (exdays).
La función establece una cookie sumando el nombre de la cookie, el valor de la cookie y la cadena de expiración.
Una función para obtener una cookie
Luego, creamos una functionque devuelve el valor de una cookie específica:
Ejemplo
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Función explicada:
Tome el nombre de la cookie como parámetro (cname).
Cree una variable (nombre) con el texto a buscar (cname + "=").
Decodificar la cadena de cookies, para manejar cookies con caracteres especiales, por ejemplo, '$'
Divida document.cookie en punto y coma en una matriz llamada ca (ca = decodedCookie.split(';')).
Recorra la matriz ca (i = 0; i < ca.length; i++) y lea cada valor c = ca[i]).
Si se encuentra la cookie (c.indexOf(name) == 0), devuelva el valor de la cookie (c.substring(name.length, c.length).
Si no se encuentra la cookie, devuelva "".
Una función para verificar una cookie
Por último, creamos la función que comprueba si se ha establecido una cookie.
Si la cookie está configurada, mostrará un saludo.
Si la cookie no está configurada, mostrará un cuadro de aviso, solicitando el nombre del usuario, y almacena la cookie de nombre de usuario durante 365 días, llamando a la setCookiefunción:
Ejemplo
function checkCookie() {
let
username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != ""
&& username != null) {
setCookie("username", username, 365);
}
}
}
Todos juntos ahora
Ejemplo
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca
= document.cookie.split(';');
for(let i = 0; i < ca.length; i++)
{
let c = ca[i];
while (c.charAt(0) == '
') {
c = c.substring(1);
}
if (c.indexOf(name)
== 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function
checkCookie() {
let user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
}
El ejemplo anterior ejecuta la checkCookie()función cuando se carga la página.