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:
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…
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a nunc. Ut ac purus. Mauris tempor, arcu aliquam pulvinarEl código para mostrar y ocultar…
$("#ocultar").click(function(){$("#msgid1").hide("slow")});
$("#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.
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:
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.
$.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:
Vemos que a la cookie ‘texto’ le asignamos los valores ‘hide’ o ‘show’.
Juan
disculpa pero como obtengo el valor de la cookie para ponerselo a un div al cargar la pagina?
Miguel Angel
Aqui se encuentra como expirar la cookie:
https://github.com/carhartl/jquery-cookie#readme
Espero que les sirva.
Oscar
Muchas gracias por el post, fue de mucha utilidad. Saludos
Borja de Opiniones
Muchas gracia spor la información. Voy a probarlo. Vale para la ley de cookies?
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
@Javier, me alegro que te haya servido. :-D
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
@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.
gesell
Como es el tiempo de duración de una cookie de jquery?
Gracias
gesell
Martin
Exacto como dice.. con cookies toma el ejemplo del código..
Muy buen articulo.
gracias
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.