Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

14. Cookies (I)

14.1 Guardar cookies

Definición

Las cookies son datos de la página modificados mediante javascript que pueden guardarse en el ordenador del usuario, de manera que éste pueda recuperarlos.

Si mediante javascript hemos dado a la página un aspecto o configuración distinta a la inicial, o hemos escrito en la página una serie de datos, al cerrar la página estos datos se perderán si no podemos guardarlos. Las cookies permiten guardar estos datos, de manera que puedan recuperarse, cuando se carga la página de nuevo o al accionar un evento.

Por otra parte las cookies en javascript permiten leer los datos almacenados desde otra página distinta de la que se han cargado. Por tanto podemos pedir datos al usuario en una página, y mostrarlos en otra distinta.

Las cookies tienen ciertas limitaciones, así un usuario no puede almacenar más de 300 cookies y el tamaño máximo de cada cookie es de 4000 bytes.

Habilitar cookies

Para que las cookies funcionen el usuario debe tener habilitado en su navegador la opcion de "aceptar cookies", a la cual normalmente se accede en la pestaña "herramientas / opciones".

Propiedad document.cookie

Esta es la propiedad de javascript que nos permite guardar las cookies y volver a leerlas. Para guardar una cookie escribiremos en principio:

document.cookie = "nombre=valor"

Cada cookie tiene un nombre, que es por lo que la identificaremos, y un valor que es el que puede cambiar dentro de la misma cookie, por ejemplo si escribimos:

document.cookie = "color=azul";

estamos guardando una cookie cuyo nombre para identificarla es color y su valor es azul;

Si queremos cambiar el valor de la cookie escribiremos:

document.cookie = "color=verde";

Sin embargo esta manera de trabajar no es nada práctica, ya que muchas veces queremos guardar los datos que ha introducido el usuario mediante un formulario o datos que puedan cambiarse facilmente. Para ello sustituiremos el nombre y/o el valor por una variable que contenga el dato que le queremos pasar. Por ejemplo:

miColor = "rojo";
document.cookie = "color="+miColor;

Observa que hemos encadenado mediante el signo + dos cadenas de texto, la primera es literal, por eso lleva comillas, la segunda está en una variable, por lo que no ponemos las comillas. De esta manera podemos crear una fórmula general para poder crear cualquier cookie sólo con cambiar el valor de las variables, esta es:

document.cookie = nombre+"="+valor;

Donde nombre es el nombre que identifica a la cookie, y valor es el valor que se le da a esa cookie. Si cambiamos el nombre, tendremos una cookie diferente, si cambiamos el valor tendremos la misma cookie pero con diferente valor.

Esto lo podemos mejorar si lo ponemos dentro de una función, a la que podemos llamar cada vez que queramos crear una cookie o modificar su valor, la función será parecida a la siguiente:

function guardarCookie(nombre,valor) {
         document.cookie = nombre+"="+valor;
         }

De esta manera podemos pasar como argumentos el nombre y el valor, sin necesidad de guardarlos en unas variables concretas, por ejemplo, en el ejemplo anterior, después de crear esta función escribiríamos:

guardarCookie("color",miColor)

Caducidad de las cookies

Sin embargo la forma de guardar las cookies vista en el apartado anterior, tampoco nos sirve de mucho, ya que éstas se borran o caducan al cerrar la sesión del navegador. Para que las cookies puedan ser guardadas para nuevas sesiones debemos ponerle una fecha de caducidad, de la siguiente manera:

document.cookie="color=rojo;expires=31 Dec 2020 23:59:59 GMT"

Después de definir el nombre y el valor de la cookie, escribimos un punto y coma (siempre dentro de las comillas que definen la cookie, escribimos después la palabra expires seguida del igual (=), y después la fecha, la cual debe ir en el formato indicado en el ejemplo, es decir: dia, mes en inglés (tres primeras letras, la primera en mayúscula), año, hora, minuto, segundo, "GMT". La indicación de las horas, minutos, segundos, y "GMT", (éste último indica que está en horario internacional), es obligatoria. En este ejemplo la cookie estará guardada hasta finales del año 2020.

También podemos guardar la fecha en una variable, de manera que pasemos la variable de la fecha en la definición de la cookie. La función anterior para guardar cookies, incorpòrará un nuevo argumento, la fecha, y quedará de la siguiente manera:

function guardarCookie(nombre,valor,fecha) {
         document.cookie = nombre+"="+valor+";expires="+fecha;
         }

Podemos comprobar que hemos guardado la cookie con el siguiente código:

alert(document.cookie)

Esto abrirá una ventana de alerta en la que se mostrarán todas las cookies que tenemos guardadas, veamos un ejemplo práctico: tenemos el siguiente formulario en el que pedimos al usuario que escriba su cookie:

<form action="#" name="dato">
<p><input type="text" name="miCookie" /> Escribe tu cookie</p>
<p"><input type="button" value="comprobar" onclick="guardar()" /> ...
<input type="button" value="Comprobar" onclick="alert(document.cookie)" /></p>
</form>

al cual le aplicaremos el siguiente código javascript

function guardarCookie(nombre,valor,fecha) {
         document.cookie = nombre+"="+valor+";expires="+fecha;
         }
caduca = "31 Dec 2020 23:59:59 GMT"
function guardar() {
         tuCookie = "pruebaCookie"
         tuValor = document.dato.miCookie.value
         guardarCookie(tuCookie,tuValor,caduca)	 
         }
				 

Esto en el navegador quedará más o menos así:

En el mensaje de alerta se mostrarán todas las cookies que hay guardadas en el ordenador del usuario. por tanto si no habiá ninguna se mostrará únicamente la creada con el código anterior, y si había más, la de este ejemplo se mostrará en último lugar.

Otras propiedades de las cookies

Aparte del nombre y la caducidad, las cookies pueden tener otras propiedades, que se indican en su definición. Éstas están relacionadas con el hecho de que la cookie esté guardada en otra página web, o servidor. No vamos a entrar en este tema, ya que excede los límites del javascript (las cookies pueden usarse también con otros lenguajes como php, asp ...). Con las propiedades ya vistas del nombre y la caducidad, podemos manejar perfectamente las cookies en javascript dentro de un mismo sitio web.

Mediante las cookies podemos recoger los datos en una página y recuperarlos o visualizarlos en otra. Esto sucede de forma automática, de manera que sólo hay que insertar el código de leer la cookie para que ésta pueda aplicarse.

Sin embargo cada navegador guarda los datos de manera independiente, es decir, tiene sus propias cookies, de manera que si hemos guardado unos datos usando un navegador, por ejemplo, Firefox, éstos solo pueden ser vistos en Firefox, En Internet Explorer, al abrir la página no veremos las cookies guardadas con Firefox, pero podemos crear unas cookies diferentes que sólo se verán en ese navegador, y así con los demás.

Nos falta ver como recuperamos los datos, es decir, como los leemos de una forma efectiva para que podamos volver a usarlos, pero eso será en la siguiente página.

Leer cookies

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com