COOKIES Y JAVASCRIPT
COOKIES Y JAVASCRIPT
Las cookies son pequeños paquetes de información enviadas por las webs que visitas y que el navegador almacena en el pc del usuario. Son útiles para guardar preferencias del usuario u otros datos referentes a usuarios en particular.
¿QUÉ INFORMACIÓN SE PUEDE ALMACENAR EN UNA COOKIE?
Se puede almacenar una alta variedad de información. Esta información se almacena en cadenas de texto en la forma variable=valor. Has de tener en cuenta que todas estas variables van en una sola cadena de texto no más de 4KB y cada par variable/valor se separa de la siguiente por un ; de la siguiente forma:
“estilo=rojo; max-age=40; path=/; domain=efxto.com”
Analizemos el código que he escrito. max-age, path y domain son nombres de variables reservados pues son leidos por el navegador para controlar información como la vida útil de la cookie o la web para la que es válida. La variable estilo es la que yo he introducido y cuyo valor va a ser el estilo seleccionado por el usario para que sea el mismo cuando vuelva a mi página. Puedes crear la variable que quieras y darle cualquier valor que desees, con las siguientes particularidades:
max-age
Por defecto toda cookie tiene una vida útil de la sesión del navegador, en otras palabras, cuando cierras el navegador la cookie desaparece. La variable max-age puede alterar este valor por defecto para hacer que sea válida durante más tiempo. Para especificar el tiempo que la cookie será válida simplemente dale el valor de tiempo que quieras a la variable max-age siempre expresado en segundos.
Por ejemplo, si queremos que la cookie sea válida por 60 días pondremos: “estilo=rojo; max-age=51840000; path=/; domain=”bloogie.es”
Actualmente la mayoría de navegadores admiten otra forma en la que no es necesario calcular los segundos: (60 segundos por 60 mintuos por 24 horas * 60 días):
“estilo=rojo; max-age=” +60*60*24*60 + ; path=/; domain=”bloogie.es”
path
Toda cookie es válida por defecto sólo para las páginas en el directorio de la
página actual e inferiores. Es decir, si la página http://dominio.com/seccion-
1/articulo3.html envía una cookie, esta será válida también para todas las páginas bajo http://dominio.com/seccion-1/ y para páginas inferiores como por ejemplo http://dominio.com/seccion-1/categoria-3/articulo4.html pero no para http://dominio.com o http://dominio.com/seccion-2.
A través de la variable path se puede alterar este valor por defecto. Por ejemplo si quieres que la cookie sea válida para todo tu sitio le daremos el valor “/” a la variable path, o si queremos que sea válida para un determinado directorio le daremos el valor “/directorio”.
domain
Con esta variable podemos especificar sub-dominios para los que la cookie es válida, he dicho subdominios porque si tu sitio es dominio.com, el navegador no aceptará cookies para otrodominio.com o facebook.com. Lo que podemos hacer con la variable domain es decirle al navegador si la cookie es válida solo para el domino principal (domain=www.dominio.com), para el dominio principal y para los subdominios (domain=dominio.com) o para un subdominio concreto (domain=subdominio.dominio.com),
secure
Esta variable no debe ser especificada a menos que quieras que la cookie sea enviada sólo si el usuario está visitando tu web a través de una conexión segura.
expires
Esta es una variable depreciada aunque aún sea soportada por los navegadores. La variable max-age es la que reemplaza a expires. Sin embargo ten encuenta que no debes usar el nombre “expires” para almacenar tu información.
No pongas espacios, comas o semi-colons en el valor de las variables
El valor de las variables de una cookie no puede contener espacios en blanco, comas o putno y comas (semi-colons). Si inevitablemente tienes que usar estos caracteres debes codificarlos. Entre los métodos que puedes usar el más fácil es encodeURIComponent() para codificar y decodeURIComponent() para decodificar cuando leas la cookie. Por ejemplo:
“estilo=” + encondeURIComponent(“estilo rojo”) + “; max-age=” + 60*60*24*60 +”;
path=”/”; domain=bloogie.es”
LÍMITES DE USO DE COOKIES
Cada navegador puede tener implementado límites difrentes para las cookies pero los estándares mínimos que debe tener son:
Longitud de la cookie: 4KB. Todas las variables, incluyendo las especiales, no deben tener más de 4.096 caracteres.
20 cookies como máximo por web.
300 cookies almacenadas como máximo, incluyendo cookies enviadas por otros sitios web.
COMO ENVIAR UNA COOKIE CON JAVASCRIPT
Enviar una cookie es bastante simple, sólo necesitas darle a la propiedad document.cookie el valor de la cadena de texto con las variables de tu cookie:
document.cookie=”estilo=” + encondeURIComponent(“estilo rojo” +”; max-age=” +
60*60*24*60 +”; path=/; domain=bloogie.es”; La siguiente función facilita algo el trabajo:
function enviar_cookie
(nombre_cookie,valor_cookie,vida_cookie_dias,dominio_cookie){
document.cookie = nombre_cookie +
“=” + encodeURIComponent( valor_cookie ) + “; max-age=” + 60 * 60 *
24 * vida_cookie_dias +
“; path=/; domain=” + dominio_cookie ;
}
Para establecer la cookie ahora solo tienes que llamar la función desde la parte de una página que quieras mediante una expresión que para nuestro ejemplo sería:
enviar_cookie(“estilo”,”color rojo”,”60″,”bloogie.es”);
COMO LEER UNA COOKIE
En este punto ya hemos enviado una cookie, pero no nos servirá de nada si no la leemos cuando el usuario visite nuestra página.
Lo primero será comprobar si la cookie existe, esto si la hemos enviado y permanece guardada en el navegador. Una vez obtenida la leeremos como lo que és, una cadena de texto en busca de los parámetros que nos interesen. En nuestro ejemplo el parámetro que nos interesa es el nombre de la cookie y su valor, es decir, que valor tiene el parámetro que hemos introducido llamado “estilo”. Para hacer esto podemos usar expresiones regulares o funciones javascript como split para separar la cadena de texto en varias partes y buscar una subcadena. Para nuestro ejemplo se podría usar la siguiente función:
function get_cookie ( nombre_cookie ){
if (document.cookie.length != 0) {
var valor_cookie = docuemnt.cookie.match (
‘(^|;)[\s]*’ +
nombre_cookie +
‘=([^;]*)’ );
return decodeURIComponent ( valor_cookie[2] ) ;
}
return ” ;
}
Para obtener el estilo seleccionado por el usuario previamente y establecido en la cookie que enviamos utilizaremos:
estilo_usuario = get_cookie(“estilo”);
COMO BORRAR UNA COOKIE
Alguna vez puede que necesites borrar una cookie enviada con anterioridad. Para hacer esto envía una cookie con max-age=0 para el mismo path y domain, dejando el parámetro que deseas eliminar con valor nulo (en nuestro caso el parámetro estilo). La función anterior que usamos para enviar la cookie dejaba el path=/, para borrar esta cookie podríamos usar esta función:
function borrar_cookie ( nombre_cookie, dominio_cookie ){
document.cookie = nombre_cookie + “=”; max-age=0; path=/; domain=” +
dominio_cookie ;
}
Llamaremos a la función con:
borrar_cookie(“estilo”,”bloogie.es”);
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros