Cookies en Javascript
Vamos a hablar de las cookies en JavaScript, aunque ya lo hemos hecho en PHP, desde el cliente podemos trabajar con ellas también.
¿Qué son las cookies?
Son pequeños archivos de texto que se almacenan en los ordenadores y que sirven para mejorar la experiencia de usuario.
Cuando un servidor envía una pagina web a un navegador, la conexión se cierra y el servidor se olvida de todo lo relacionado con el usuario, de este modo las cookies se inventaron para resolver este problema de la siguiente forma.
La primera vez que un usuario visita una página, se crea una cookie donde se guarda el nombre del usuario. La siguiente vez que el usuario accede a la web, está lee la cookie que le «recuerda» el nombre del usuario.
Las cookies se guardan en pares nombre y valor:
usuario = Juan Nadie
De este modo cuando un navegador solicita una página web desde un servidor, las cookies de la página se agregan a la solicitud y si existen, el servidor recibe los datos necesarios para «recordar» la información que estas almacenan.
Las cookies, nunca deben de mantener claves de acceso!!!
Creando cookies en JavaScript
JavaScript puede crear, leer y borrar las cookies con la propiedad document.cookie
Por ejemplo puede crear una cookie muy simple de la siguiente forma:
document.cookies = "usuario = Juan Nadie";
De forma predeterminada el navegador elimina todas las cookies que no tienen fecha de caducidad, pero podemos ponerle estas fechas a las cookies de la siguiente forma:
document.cookies = "usuario = Juan Nadie; expires = Thu, 13 Dec 2016 12:00:00 UTC";
Otro parámetro que podemos guardar es donde queremos que se guarde la cookie por medio de un path:
document.cookies = "usuario = Juan Nadie; expires = Thu, 13 Dec 2016 12:00:00 UTC; path=/";
Leer cookies en JavaScript
Para leer las cookies en JavaScript es tan sencillo como:
var x = document.cookie
Esto hará que se lean todas las cookies de la página en una secuencia del tipo: cookie1 = valor; cookie2 = valor;…
Cambiar cookies con Javascript
En realidad esto es tan sencillo como crearlas, ya que se hace de la misma manera sobreescribiendose.
document.cookies = "usuario = Juan Nadie; expires = Thu, 13 Dec 2016 12:00:00 UTC; path=/";
Eliminar cookies con JavaScript
La eliminación de las cookies es muy sencillo, tan solo hay que poner una fecha pasada en el parámetro de caducidad:
document.cookies = "usuario =; expires = Thu, 01 Jan 1970 00:00:00 UTC";
Ademas no hay por que especificar ningún valor a la cookie, ya que esta va a ser eliminada.
El string de cookies
Aunque la propiedad document.cookie se parece a una cadena de texto normal, no lo es.
Incluso al escribir una cadena de cookies para toda la document.cookie, cuando se lean de nuevo, solo se podrá ver el par nombre-valor de la misma.
Las cookies se organizan por antigüedad y si queremos recoger el valor de alguna debemos de escribir una función que busque ese valor.
Ejemplo de cookies en JavaScript
Vamos a crear una cookie que almacena el nombre de un visitante. Pidiendo el nombre la primera vez que entra, y la siguiente vez que entre le dará un mensaje de bienvenida.
Para ello vamos a trabajar con tres funciones:
- Para establecer la cookie
- Para obtener el valor
- Para comprobar su valor
Función para establecer una cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
Los parámetros de la función son el nombre de la cookie (cname), el valor (cvalue), y el numero de dñias hasta que expira (exdays).
Finalmente se establece el valor de la cookie concatenando estos tres pares.
Función para obtener una cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}
Toma el nombre de la cookie como parámetro (cname)
Crea una variable (name) con el texto que se desea buscar (cname + «=»)
Usamos document.cookie.split para encontrar un punto y como en la matriz ca (ca = document.cookie.split (‘;’))
Recorre la matriz y lee cada valor
Si encuentra (c.indexOf(nombre) == 0), devuelve la cookie, y si no es asó devuelve la cadena sin nada.
La función que controla la cookie
Finalmente se crea la función que comprueba si se establece la cookie.
Si esta se configura, entonces se muestra un saludo.
Si la cookie no se ha establecido, se muestra un cuadro de dialogo, preguntando por el nombre del usuario y almacena el nombre de usuario durante 365 días.
function checkCookie() {
var username=getCookie("username");
if (username!="") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
Uniendo las piezas
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var 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() {
var user = getCookie("username");
if (user != "") {
alert("Bienvenido de nuevo " + user);
} else {
user = prompt("Por favor introduzca su nombre:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
Y de esta forma ya sabemos como se utilizan las cookies en javascript, espero que os haya resultado de ayuda.
There are 2 Comments.