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:

  1. Para establecer la cookie
  2. Para obtener el valor
  3. 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.