Cookies con JavaScript

A veces necesitamos necesitamos almacenar datos para crear un mayor dinamismo o simplemente porque nuestra web necesita que el navegador del usuario recuerde algún dato, y para esto nos podemos ayudar de las cookies.
Para crear estas cookies, nos podemos ayudar de JavaScript ejecutado en cliente, y aunque también se pueden crear con lenguajes de servidor como PHP, con este lenguaje no nos harán faltas peticiones al servidor extra, dejaremos que lo haga el navegador del usuario.

Crear una cookie

Crear una cookie en el navegador, es muy fácil, solo necesitamos con un nombre para la misma y un valor que asignarle a ese nombre. Por ejemplo, asignaremos a una cookie con el nombre precio el valor 15, y para esto usaremos la propiedad document.cookie:

document.cookie="precio=15";

Aunque este código almacena una cookie sin problemas, esta expirara cuando el usuario cierre el navegador. Para evitar esto, necesitaremos incluir en ese código una fecha de expiración de la cookie:

document.cookie="precio=15; expires=Mon, 18 Jan 2016 12:00:00 UTC";

El formato de la fecha tiene que estar en  UTC.
Si queremos que esta cookie pertenezca a un ruta en especial de nuestra web, por ejemplo, una subcarpeta de nuestro servidor, tendremos que especificarlo con path:

document.cookie="precio=15; expires=Mon, 18 Jan 2016 12:00:00 UTC; path=/subcarpeta";

De forma predeterminada, si no lo incluimos, el navegador interpretara como que es para toda la web. A no ser que sepas lo que estas haciendo y/o lo necesites, lo mejor es no ponerlo.

Borrar una cookie

No existe un código definido para borrar una cookie, pero podemos hacerlo creando una cookie con una fecha de expiración anterior a la actual, y un parámetro vacío:

document.cookie = "precio=; expires=Thu, 01 
Jan 1970 00:00:00 UTC";

Leer los datos de una cookie

 Cada vez que creamos una o varias cookies estas se almacenan en un mismo archivo de texto, así que si intentamos leer este archivo recibiremos los codigos antes expuestos. Para poder coger el valor una sola cookie, podemos usar una función que separe estos datos:

function leerCookie(cookie) {

    var name = cookie + "=";

    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 "";

}

Como podemos ver, en la variable precio se almacenara el valor 15 antes añadido en la cookie con el mismo nombre.

Mini librería para Cookies en Javascript

Es engorroso y una mala practica escribir una y otra vez código que se va a repetir en nuestro script, así que lo mejor es crear un pequeño grupo de funciones que creen, borren y lean las cookies de forma automática. Aquí os traigo un pequeño código JavaScript que solo tenéis que pegar en vuestra web para automatizar estos procesos:

Descargar Cookies.js | Demo

crearCookie(nombre, valor, expira, path);

nombre: El nombre de la cookie que se creara.
valor: El valor que tendrá la cookie.
expira: El numero de días en los que la cookie expirara.
path: Solo si se necesita. 

leerCookie(nombre);

nombre: El nombre de la cookie a leer.

borrarCookie(nombre);

nombre: El nombre de la cookie a borrar.

Ejemplo:

crearCookie('precio', 15, 30);

// Crea una cookie llamada "precio" con el valor 15.



var precio = leerCookie('precio');

// Crea una variable llamada "precio" con el valor almacenado en la cookie precio.



borrarCookie('precio');

// Borra la cookie precio.

Si tienes alguna duda o consejo, exponlo en los comentarios. ;)