DesarrolloLibre

Desarrollo Web, Android y mucho más

17-12-2015

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();

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

Enlaces de interés

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


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Librería para gestos

Librería para gestos

anime.js librería para animaciones en JavaScript

anime.js librería para animaciones en JavaScript

Árbol arcoíris creciente

Árbol arcoíris creciente

Algunos artículos que te pueden interesar

Probando las transformaciones 3d con anime.js

Probando las transformaciones 3d con anime.js

Andrés Cruz 01-09-2016

Selectores en JavaScript

Selectores en JavaScript

Muchas veces usamos jQuery por facilidad a la hora de seleccionar elementos del DOM, y poder trabajar con ellos. Pero, podemos acceder los mismos elementos de formas similares con puro javascript.

Andrés Cruz 27-08-2013

Funciones declarativas vs Funciones de expresiones en JavaScript

Funciones declarativas vs Funciones de expresiones en JavaScript

El compilador de JavaScript coloca las funciones de declarativas en un ámbito global a todo el programa al contrario de las funciones de expresión que solo corresponde a una sección definida del programa.

Andrés Cruz 25-05-2015