Muchas veces queremos guardar una que otra información de nuestro usuario que esté visitando una página web pero por diversas razones no se quiere utilizar tecnologías del lado del servidor.

Al emplear otras tecnologías como Android, aplicaciones de escritorio o cualquier aplicación el lado del servidor es más fácil la respuesta al querer guardar información de manera persistentes en archivos y/o base de datos; con JavaScript tenemos algunas soluciones similares como las Cookies.

Las Cookies son pequeños archivos que se almacenan en las páginas web.

JavaScript cuenta con varias tecnologías persistentes (que la información que deseemos almacenar se mantenga aun cuando el usuario cierre o refresque la ventana de su navegador) como SQLite y las Cookies que trataremos en esta entrada.

Las Cookies en JavaScript

Seguramente habrás escuchado múltiples veces sobre las cookies al momento de entrar a un sitio web aparece un mensaje como el siguiente: "Este sitio, como la mayoría, usa cookies. Si sigues navegando entendemos que aceptas la política de cookies."

Pero tal vez no la hayas prestado mucha atención todavía, pero descuida; esta entrada ofrece una introducción al uso de los Cookies con JavaScript.

Empezando con las Cookies con JavaScript nativo

Creando Cookies

Para crear Cookies debemos de emplear el esquema llave=valor o key=value:

document.cookie="key=value;"

Accediendo a las Cookies

Para acceder a todas las Cookies desde la posición actual podemos usar el siguiente JavaScript:

document.cookie;

Para nuestro ejemplo (que veremos un poco más alante) da algo como el siguiente resultado:

"nombre=andres; usuario=acy;"

Ejemplos de Cookies

Crearemos un par de Cookies para experimentar con ellas; la primera Cookie indica el nombre de la persona y otra Cookie para indicar el usuario las cuales serán solicitadas al usuario mediante un prompt de JavaScript:

    // ejemplo tomado en gran parte de http://www.w3schools.com/js/js_cookies.asp
    function setCookie(cname, cvalue) {
        document.cookie = cname + "=" + cvalue + "; ";
    }

    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 nombre = getCookie("nombre");
        var usuario = getCookie("usuario");
        if (nombre != "" && usuario != "") {
            alert("Hola " + nombre + " tu usuario es: " + usuario);
        } else {
            nombre = prompt("Da tu nombre:", "");
            if (nombre != "" && nombre != NULL) {
                setCookie("nombre", nombre);
            }
            usuario = prompt("Da tu usuario:", "");
            if (usuario != "" && usuario != NULL) {
                setCookie("usuario", usuario);
                alert("refresca la página");
            }
        }
    }
    checkCookie();

Ver demo

Lo que debes probar en el ejemplo anterior es que suministrar tu nombre y un usuario y refrescar la página.

Una vez realizado los pasos anteriores verás que el navegador "recuerda" el nombre colocado anteriormente y el usuario; con este pequeño ejemplo puedes evidenciar el uso básico de las cookies y de aquí explorar una amplia cantidad de nuevas posibilidades para colocar nuestras aplicaciones web en otro nivel.

Fecha de expiración de las Cookies

A las Cookies se les puede definir un tiempo de vida útil para que una vez que pase la fecha simplemente sean eliminadas de manera automática:

document.cookie="nombre=andres; expires=Thu, 17 Dec 2016 12:00:00 UTC";

Para ello podemos emplear un esquema como el presentado en la W3C:

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

Especificamos la cantidad de días que queremos que dure nuestra Cookie (con la variable exdays) y calculamos el tiempo a partir de la hora actual d.getTime(), luego resta especificar el formato adecuado:

var expires = "expires="+d.toUTCString();

Terminando el CRUD de las Cookies

Hasta ahora hemos visto cómo crear, acceder y especificar el tiempo de vida de las Cookies, falta indicar cómo podemos eliminar y modificar las ya existentes.

Eliminando las Cookies.

En el apartado anterior indicamos cómo definir un tiempo de vida para las Cookies; podemos emplear una fecha anterior a la actual para eliminar las Cookies que ya no nos resulten de utilidad:

document.cookie="nombre=andres expires=Thu, 16 Dec 2015 12:00:00 UTC";

Modificando las Cookies.

Las Cookies se modifican tal cual se crean las mismas; es decir:

document.cookie="nombre=andres";

Ejemplo final de Cookies

Para terminar, veamos un ejemplo en donde usamos todo lo explicado hasta ahora.

    >!--Demas JavaScript del ejemplo anterior--> 

    function deleteCookie() {
        document.cookie = "nombre=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
        document.cookie = "usuario=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
    }

    function updateNombre() {
        nombre = prompt("Da tu nombre nuevamente:", "");
        if (nombre != "" && nombre != NULL) {
            setCookie("nombre", nombre);
        }
    }

    function updateUsuario() {
        usuario = prompt("Da tu usuario nuevamente:", "");
        if (usuario != "" && usuario != NULL) {
            setCookie("usuario", usuario);
        }
    }

Ver demo

Enlaces de interés

• MDN: Document.cookie
• JavaScript Cookies

Y por ahora esto es lo básico que necesitamos para trabajar con las Cookies.