Usando cookies con jQuery

28/Dic/2009 jQuery , , 11 Comentarios
programación jquery en español

En este ejemplo vamos a ver como crear cookies con jQuery. Para ello almacenaremos información sobre una acción del usuario, que será si le gusta el texto oculto o no. De esta manera, cuando vuelva a visitarnos ya sabremos como le tenemos que mostrar el texto.

Lo primero que tenemos que saber es que jQuery no nos ofrece un API directo para el manejo de cookies. Es por ello que nos tendremos que apoyar en un plugin. En este caso será el plugin Cookie.

Nos podemos descargar el plugin Cookie desde http://plugins.jquery.com/files/jquery.cookie.js.txt

En la parte inicial de nuestra página tenemos que cargar jQuery como el plugin. Para ello utilizaremos las siguientes líneas de código:

  1. <script type="text/javascript" src="jquery-1.2.6.js"></script>
  2. <script type="text/javascript" src="jquery.cookie.js"></script>

Como hemos comentado que la actividad que trazaremos a la cookie va a ser la ocultación o no de texto, crearemos el código necesario para esta actividad. Puedes ver la explicación de este código en Ocultar y mostrar elementos con jQuery. Pero básicamente consistirá en el manejo de las funciones de jQuery: .hide() y .show().

El texto...

  1. <div id="msgid1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a nunc. Ut ac purus. Mauris tempor, arcu aliquam pulvinar</div>

El código para mostrar y ocultar...

  1. $("#ocultar").click(function(){$("#msgid1").hide("slow")});
  2. $("#mostrar").click(function(){$("#msgid1").show("slow")});

Ahora nos ponemos con la cookie. La variable de la cookie en la que guardaremos la información se llamará "texto" y le asignaremos los valores show o hide. Así, lo primero que haremos es cargar la cookie y ver el valor de la misma. Ya que si el usuario ya ha visitado la página dejaremos el contenido de la misma tal cual lo dejó la última vez.

  1. <script type="text/javascript">
  2. // Recuperamos el valor de la cookie
  3. var texto = $.cookie('texto');
  4. if (texto=='hide')
  5. $("#msgid1").hide();
  6. </script>

Esta parte del código habrá que ponerla al final de la página, ya que lo que hace es recuperar el valor de la cookie y en el caso de que el valor sea "hide" ocultar el contenido del texto. Y es por ello por lo que necesita que el texto ya se haya cargado en la página.

Vemos que el acceso a la cookie es muy sencillo. Simplemente utilizamos la estructura:

  1. var texto = $.cookie('nombre_cookie');

Para asignar un valor a la cookie simplemente tendremos que utilizar un segundo parámetro con el valor a asignar a la cookie.

  1. $.cookie('nombre_cookie','valor');

La modificación del contenido de la cookie lo haremos cada vez que el usuario modifique la visualización u ocultación del texto. Así ese código quedará de la siguiente forma:

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $("#ocultar").click(function(){
  4. $("#msgid1").hide("slow");
  5. $.cookie('texto','hide');
  6. });
  7.  
  8. $("#mostrar").click(function(){
  9. $("#msgid1").show("slow");
  10. $.cookie('texto','show');
  11. });
  12. });
  13. </script>

Vemos que a la cookie 'texto' le asignamos los valores 'hide' o 'show'.

Vídeos sobre jQuery


11 comentarios en “Usando cookies con jQuery”

Víctor Cuervo

Juan

disculpa pero como obtengo el valor de la cookie para ponerselo a un div al cargar la pagina?

Víctor Cuervo

Miguel Angel

Aqui se encuentra como expirar la cookie:
https://github.com/carhartl/jquery-cookie#readme

Espero que les sirva.

Víctor Cuervo

Oscar

Muchas gracias por el post, fue de mucha utilidad. Saludos

Víctor Cuervo

Borja de Opiniones

Muchas gracia spor la información. Voy a probarlo. Vale para la ley de cookies?

Víctor Cuervo

carlos contreras

Tengo una ventana modal que de dispara onload al cargar la pagina, pero cuando se va de otras secciones de la pagina de nuevo al index esta se vuelve a disparar, yo quiero que se dispare solo cuando entras a la pagina desde el navegador.

Víctor Cuervo

Víctor Cuervo

@Javier, me alegro que te haya servido. 😀

Víctor Cuervo

Javier

Vaya estupendo, justo estaba buscando un plugin de este tipo que utilice cookies para que no aparezca siempre el popup, gracias !

Víctor Cuervo

Víctor Cuervo

@gesell,

Pues parece que la documentación del plugin ha desaparecido. Pero buscando por ahí he encontrado una forma documentada de hacerlo.

Sería con el siguiente código:

$.cookie('cookie_name', 'cookie_value', { expires: 2, path: '/', domain: 'yourwebsite.com', secure: true });

Espero que te sirva.

Víctor Cuervo

gesell

Como es el tiempo de duración de una cookie de jquery?
Gracias

Víctor Cuervo

gesell

Martin
Exacto como dice.. con cookies toma el ejemplo del código..
Muy buen articulo.
gracias

Víctor Cuervo

Martin

Tengo un problema. Yo tengo una lista con un mismo identificador en cada y he añadido un botón al final de cada elemento de la lista y cuando presiono el boton se oculta ese elemento de la lista. Pues como es normal al recargar vuelven a verse todos y queria que aquellos que habia ocultado se mantenieran ocultos. Muchas gracias, haber si alguien me puede ayudar.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*