2Novatos

Nunca había tocado el tema cookies con Javascript, para ser realistas, pocas veces he tocado cookies, pero aun menos en Javascript hasta hoy.

Y por la tozudez que me caracteriza, no paro hasta que no saco lo que tengo en mente. Y quería gestionar el uso de cookies con Javascript y PHP para acabar de hacer unos retoques a la pagina de inicio que estoy haciendo. Al final ha resultado ser una tontería, pero como muchas otras… son tonterías con las que a veces perdemos un tiempo cada vez más importante. Así que comparto el conocimiento y me lo auto recuerdo.

Objetivo

El objetivo es que al seleccionar el estilo que queremos ver en la pagina de inicio, blanco, negro o normal, este se guarde en una cookie y de esta forma, al volver a acceder a la pagina recuperamos este valor evitando que el visitante tenga que volver a seleccionar el color o el estilo que le gusta.

Para facilitar el trabajo, como que ya estoy familiarizado con la librería de jQuery, me ayudo de esta para gestionar también las cookies desde JS. Aquí podemos ver y descargar el código de la librería jquery.cookie.js.

Implementación

Para asignarle un valor a la cookie, es tan sencillo como poner lo siguiente:

/*-----------------------
* ASIGNAR VALOR COOKIE
*----------------------*/

$.cookie('nombre_cookie', 'valor_cookie');

// Para declararla, como vemos, le asignamos un nombre, seguido de una coma y el valor que le queremos dar o la variable que le pasamos.

Y si ya la hemos declarado y queremos recibirla, lo hacemos de esta forma:

/*-----------------------
* RECOGER VALOR COOKIE
*----------------------*/

$.cookie('nombre_cookie');

// Así no estamos asignando el valor a nada ni lo mostramos, pero lo podemos usar dentro de alguna función
// O la asignamos a una variable para trabajar más cómodamente

var galleta = $.cookie('nombre_cookie');

Claro que una vez declarada… llega el momento en que no la necesitamos… vamos a destruirla:

/*-----------------------
* DESTRUIR COOKIE
*----------------------*/

$.cookie('nombre_cookie', null);

// Asignandole un null al valor de la cookie, esta se destruye.

Y por último lo que nos queda es gestionar el tiempo de vida de la cookie y el alcance que queremos que tenga, etc… veamos las opciones:

/*----------------------
* OPCIONES COOKIE
*---------------------*/

$.cookie('nombre_cookie', 'valor_cookie', { expires: 7, path: '/', domain: '2novatos.com', secure: true });

/* Aqui nos encontramos con distintos parámetros además del nombre y del valor de la cookie, veamos como funciona cada uno.
* Param expires: Fecha en la que expira la cookie o un entero que especifica la fecha de caducidad desde ahora en días. (En el ejemplo son 7 días) También se puede hacer usando un objeto Date.
* Si a la cookie se le asigna un NULL al parametro expires se la considerará una cookie de sesión y se destruirá en abandonar la pagina.
* Si el parametro expires contiene un valor negativo o una fecha en el pasado, la cookie se destruirá.
* Param path: El valor de la ruta que se le da a la cookie (Por defecto la ruta de la pagina que la creó)
* Param domain: El valor del atributo de dominio de la cookie (Por defecto el dominio de la pagina que la creó)
* Param secure: Si true, requiere del protocolo HTTPS para la transmisión segura de datos y de la cookie.
*/

Y por ahora esto es todo, es bastante sencilla la forma de gestionar las cookies con Javascript. Si tenéis alguna duda con esto, os responderemos encantados!