¿Qué es una Cookie? y ¿Cómo crearlas y leerlas con jQuery?

En este artículo explicaré con un ejemplo, cómo agregar cookies usando jQuery, es decir, guardar y consultar cookies en el navegador usando jQuery. Pero primero veremos que es una cookie y que se puede hacer con ella.

¿Qué es una Cookie?

Una cookie son datos que un navegador web almacena de forma automática en el ordenador de un usuario cuando visita una página web. La cookie es enviada desde el servidor al visitante de la página web. Posteriormente, cada vez que el usuario visite esa misma página web o alguna otra del mismo dominio, la cookie será leída por el navegador web, sin ser modificada, y devuelta al servidor web.

Por tanto, una cookie son sólo datos que se almacenan en el ordenador del usuario. Pero como el almacenamiento se realiza por orden del servidor web, siempre ha existido el miedo de que se pudiera hacer algo malicioso. Sin embargo, las cookies no son software, tampoco son fragmentos de código, son simplemente datos. Por tanto, en principio las cookies no pueden transmitir y ejecutar virus, ni instalar malware como troyanos o programas de espionaje.

 El plugin cookie de jQuery

Este artículo usare el plugin jQuery Cookie. Este artículo cubre los conceptos básicos de agregar y leer cookies. Para un uso más avanzado, consulte la documentación de jQuery Cookie Plugin.

 Crear cookies con jQuery

El siguiente código HTML consiste en un cuadro de texto HTML y un botón HTML para agregar cookies usando jQuery.

Agregar cookies

Cuando se hace clic en el botón Agregar cookie, se ejecuta el evento correspondiente que guarda el valor de txtName en la cookie del navegador utilizando la función $.cookie.

La función $.cookie acepta dos parámetros, primero el Nombre (Clave) de la Cookie y luego el Valor que se almacenará en la Cookie.

Leer Cookies

Cuando se hace clic en el botón Leer cookie, se ejecuta el evento jQuery correspondiente que obtiene el valor de la cookie utilizando la función $.cookie.

Para leer el valor de la cookie, la función $.cookie se usa con un parámetro, es decir, el nombre (clave) de la cookie.

El valor leído de la cookie se muestra usando el cuadro de mensaje de alerta de JavaScript.

Nombre:
<input type="text" id="txtName" />
<br />
<br />
<input id="btnAdd" type="button" value="Agregar cookie" />
<input id="btnRead" type="button" value="Leer cookie" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnAdd").click(function () {
            $.cookie("nombre", $("#txtName").val());
        });
        $("#btnRead").click(function () {
            alert($.cookie("nombre"));
        });
    });
</script>