Cookies JavaScript

Trabajar con cookies en javascript

Las cookies son pequeños archivos de texto que se almacenan en el equipo con la finalidad de recordar información sobre el usuario que navega por una página web.

Por defecto cuando un servidor web termina de envíar una página web a un navegador, la conexión se cierra, y el servidor se olvida de todo lo relacionado con el usuario.

Las cookies se inventaron para resolver este problema. Podemos usarlas para almacenar el nombre un usuario que ha visitado nuestra página web, y la próxima vez que el usuario la visite, la cookie «recordara» su nombre.

Las cookies se guardan en pares de nombre y valor como muestra el siguiente ejemplo:

username=MásQueWeb

Crear una cookie con Javascript

Con JavaScript se puede crear, leer y borrar las cookies utilizando la propiedad document.cookie. La sintaxis sera la siguiente:

document.cookie = "username=MásQueWeb";

También podemos agregar otros parametros de forma opcional separados por un punto y coma ‘;‘, los más comunes son expires (fecha de caducidad) y path (ruta a la que pertenece la cookie).

document.cookie = "username=MásQueWeb; expires=Thu, 18 Dec 2017 12:00:00 UTC; path=/";

Por defecto, una cookie pertenece a la página actual y se elimina cuando se cierra el navegador.

Leer una cookie con Javascript

Las cookies se pueden leer de la siguiente manera:

var mi_cookie = document.cookie;

La propiedad document.cookie devolverá todas las cookies en una cadena muy similar a:

cookie1 = valor; cookie2 = valor; cookie3 = valor;

Cambiar una cookie con Javascript

Con JavaScript editar una cookie es tán fácil como crearla, de forma que si ya existe la sobreescribe.

document.cookie = "username=MásQueWeb; expires=Thu, 9 Jan 2017 18:30:00 UTC; path=/";

Eliminar una cookie con Javascript

Eliminar una cookie es muy simple, no es necesario especificar un valor cuando se elimina una cookie, sólo hay que establecer el parámetro expires a una fecha pasada:

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

Nota: Algunos navegadores no permitirán que se elimine una cookie si no se especifica la ruta de acceso.

Ejemplo de cookies en JavaScript

Vamos a crear una cookie que almacena el nombre de un visitante. La primera vez que entre se le pedira el nombre, y la siguiente vez le mostrara un mensaje de bienvenida.

Para ello vamos a trabajar con tres funciones:

  1. setCookie()
  2. getCookie()
  3. checkCookie()

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 número de días hasta que expira (exdays).

Establecer la caducidad del la cookie es fácil, solo tendremos que hacer uso de la clase Date() disponible en javascript.

var d = new Date();
d.setTime(d.getTime() + (120 * 1000));         // expira en 120 segundos
d.setTime(d.getTime() + (3 * 60 * 1000));      // expira en 3 minutos
d.setTime(d.getTime() + (4 * 60 * 60 * 1000)); // expira en 4 horas
d.setDate(d.getDate() + 5);                    // expira en 5 días

Finalmente la función establece la cookie concatenando los tres parámetros.

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

Devuelve la cookie cuyo nombre coincide con el parámetro (cname)

Se crea una variable (name) con el texto que se desea buscar (cname + “=”)

Usamos document.cookie.split para encontrar un punto y coma 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 -1.

La función que comprueba la cookie

Para terminar creamos la función que comprueba si la cookie ha sido establecida.

function checkCookie(cname) {
    var username=getCookie(cname);
    if (username!="") {
        alert("Bienvenido " + username);
    } else {
        username = prompt("Por favor escribe tu nombre:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

Si el nombre coincide con el parámetro (cname) muestra un saludo.

Si la cookie no está establecida, se mostrará un cuadro de mensaje, preguntando por el nombre del usuario, el cual se almacenara en la cookie durante 365 días, llamando a la función setCookie.

Comentarios y opiniones

Puede que tarde en responder, se paciente.

*
*