Gestión de cookies en Javascript

Antes de comenzar a escribir sobre la gestión de cookies en Javascript, tenemos que saber qué es esto de las cookies. Muchos lo sabréis ya, pero lo explico por si acaso.

Qué son las cookies

Una cookie es un pequeño fichero de texto que se crea y almacena en el navegador cuando un usuario visita una página. Su principal utilidad es que la web sea capaz de recordar a un visitante cuando vuelva a navegar por la página en cuestión, ya que cuando se cierra una conexión, el servidor no recuerda nada sobre el usuario. Surgieron para solucionar el problema de almacenar información sobre el usuario.

La información que almacenan las cookies suele tener que ver con los datos de los usuarios, como usuario y contraseña, preferencias personales, enlaces a redes sociales (como por ejemplo el botón de seguir en Twitter o el Like en Facebook).

Cuando entráis a Twitter, Gmail, Facebook, o cualquier otra página que utilice cookies y necesite de un usuario y contraseña, no tendréis que introducir cada vez vuestros datos, ya que se almacenan en vuestro ordenador.

No todas las páginas utilizan cookies, pero sí la mayoría. Geeky Theory utiliza, así que para saber más, podéis visitar esta página en la que os contamos la política que seguimos. Os lo resumo: Google Analytics para ver las visitas, redes sociales para compartir artículos y credenciales para cuando un usuario escribe un artículo.

Debe quedar claro que el servidor no almacena ningún dato sobre el usuario.

Gestionar las cookies en Javascript

Si sois programadores Web, posiblemente tengáis que utilizar cookies para cualquier función de la aplicación. Además, los que seáis de Javascript (a mi cada vez me gusta más) podéis gestionarlas muy fácilmente con varios métodos que os voy a enseñar a continuación.

Las cookies son almacenadas en el ordenador en formato clave-valor. Un ejemplo podría ser username=Mario Pérez para recordar el nombre de usuario o color=black para recordar el color preferido de un visitante. En caso de que no pongamos una fecha de expiración, la cookie se eliminará al cerrar el navegador, así que también podemos especificar la fecha en que el navegador del usuario la borrará.

Para crear una cookie, el código Javascript sería:

document.cookie="username=Mario; expires=Mon, 2 Feb 2015 11:30:00 UTC";

El navegador almacenaría mi nombre de usuario y la fecha de expiración sería el lunes 2 de febrero de 2015 a las 11:30 horas. En caso de querer modificarla, haríamos lo mismo que al crearla, pero con nuevos datos. Para eliminarla, le ponemos una fecha que ya haya pasado:

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

Métodos para la gestión de cookies

Crear una cookie

Esta función recibe como parámetros la clave, el valor y la fecha de expiración y concatenarlos en un string para almacenar los datos. Podemos llamarla tantas veces como queramos.

function crearCookie(clave, valor, diasexpiracion) {
    var d = new Date();
    d.setTime(d.getTime() + (diasexpiracion * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = clave + "=" + valor + "; " + expires;
}

Obtener una cookie

Lo que hace esta función es separar el valor de las cookies por puntos y comas y buscar la clave y valor correspondiente. Si no encuentra nada, devuelve un string vacío.

function obtenerCookie(clave) {
    var name = clave + "=";
    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 "";
}

Comprobar si una cookie ha sido creada

Esta función comprueba si una cookie existe o ha sido creada previamente mediante el uso de la función obtenerCookie(). Va a recibir como parámetro una clave.

function comprobarCookie(clave) {
    var clave = obtenerCookie(clave);
    if (clave != "") {
        // La cookie existe. 
    } else {
        // La cookie no existe. 
    }
}

Todas las funciones juntas (para que hagáis copia-pega):

function crearCookie(clave, valor, diasexpiracion) {
    var d = new Date();
    d.setTime(d.getTime() + (diasexpiracion * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = clave + "=" + valor + "; " + expires;
}

function obtenerCookie(clave) {
    var name = clave + "=";
    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 comprobarCookie(clave) {
    var clave = obtenerCookie(clave);
    if (clave != "") {
        // La cookie existe. 
    } else {
        // La cookie no existe. 
    }
}

Sin más, acabo el artículo. Espero que os sea de ayuda y podáis implementarlo en vuestros proyectos, igual que yo lo he hecho en los mios.

¡Saludos!