Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 23

Visitas el mes pasado: 18

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript
Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript
Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web
www.programacionweb.net
WebEstilo: JavaScript
www.webestilo.com
W3 schools; Javascript Tutorial
www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.
Jose Antonio Rodriguez: manual en PDF

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




15. Resumen (XI)

15.11 Cookies

javascript

Definición

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

Al cerrar la página se perderán los datos que hay en ella, a no ser que los guardemos en cookies. En javascript podemos guardar cualquier dato o variable en una cookie. Al volver a abrir la página las cookies guardadas estarán disponibles para ser usadas.

Las cookies se guardan en el ordenador del usuario, y concretamente en el navegador que se está usando. Para ello el navegador debe tener habilitadas las cookies. Normalmente solemos encontrar el botón para habilitar cookies en la pestaña de "herramientas/opciones", o en "configuración": aunque lo normal es que éstas estén ya habilitadas por defecto.

Las cookies se guardan en el navegador, por lo que para recuperarlas debemos usar no sólo el mismo ordenador, sino también el mismo navegador en que las hemos creado. Sin embargo una cookie creada en una página puede verse en otra distinta.

Hay ciertas limitaciones en el uso de cookies. Un usuario no puede almacenar más de 300 cookies, y el tamaño máximo de cada cookie es de 4000 bytes.

Guardar cookies

Para crear una nueva cookie usaremos la propiedad document.cookie de la siguiente manera:

document.cookie = "nombre=valor";

A cada cookie le asignamos un nombre y un valor. Con el nombre identificamos la cookie entre otras que podamos tener, y en el valor guardamos el dato que nos interesa.

En el ejemplo anterior hemos pasado los datos en forma de cadena de texto, por lo que lo escrito es lo que guardamos. Sin embargo podemos pasar los datos mediante variables si los sacamos de la cadena, por ejemplo:

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

De esta manera podemos guardar cualquier variable en una cookie, y además guardar su nombre en una variable.

Para cambiar el dato almacenado en una cookie basta rescribirla cambiando sólo el dato, pero no el nombre:

document.cookie = "color=rojo"; //cookie inicial

document.cookie = "color=verde"; //Cambiamos el valor de la cookie

Las cookies tal como las tenemos hasta ahora no pueden ser guardadas, pues desaparecen al cerrar la página. Para poder conservarlas debemos ponerles una fecha de caducidad. Esto lo hacemos añadiéndole el siguiente código:

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

Después del nombre y el valor, escribimos el punto y coma, la palabra expires y el signo igual, a continuación escribimos la fecha de caducidad. La fecha irá siempre en el formato que tiene en el ejemplo, es decir: día del mes, mes abreviado en inglés, año completo, hora minuto y segundo separados por signos de dos puntos, y el literal GMT

Todo lo anterior, incluido el nombre y el valor, está incluido dentro de una cadena de texto. Por lo tanto si lo tenemos guardado en variables, debemos sacar las variables de la cadena, para unirlas a ella mediante el signo + . Ejemplo:

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

La cookie dejará de funcionar cuando le llegue su fecha de caducidad. Entonces será borrada de la lista de cookies.

Por lo tanto para borrar una cookie basta con cambiarle la fecha de caducidad a una fecha anterior a la actual.

Leer cookies

No hay un método concreto para acceder a un valor determinado de una cookie, por lo que seguiremos una serie de pasos.

En primer lugar accedemos a todas las cookies mediante la instrucción:

misCookies = doument.cookie;

La variable misCookies contendrá todas las cookies que tenga guardadas el usuario en el ordenador mediante javascript. Estas se mostrarán en una cadena de texto que tiene el siguiente formato:

"nombre1=valor1;nombre2=valor2;/* ... */nombreN=valorN"

El siguiente paso sería convertir esta cadena de texto en un array en el que cada elemento sea una cookie, para ello utilizamos el método split().

listaCookies = misCookies.split(";")

Como separador utilizamos el punto y coma, que es el elemento que separa las cookies dentro de la cadena. De esta manera se forma un array en el que cada elemento es una cookie distinta.

El siguiente paso es buscar la cookie en el array. Nosotros conocemos el nombre e la cookie, y queremos buscar su valor. Crearemos un bucle que busque la cookie dentro del array. Utilizaremos para ello el método search(). Por ejemplo buscamos una cookie llamada "color".

for (i in listaCookies) {
    busca = listaCookies[i].search("color");
    if (busca > -1) {micookie=lista[i]}
    }

Tenemos ya aislada la cookie en una cadena de texto (variable micookie), sin embargo en ésta se muestra tanto el nombre como su valor separados por el signo igual ("nombre=valor").

Lo que nos interesa aquí es obtener el valor, para ello utilizamos los métodos indexOf y substring() para aislar el valor de la cookie.

Con indexOf localizamos la posición en la cadena del signo igual, que es el que separa los dos valores:

pos = micookie.indexOf("=");

Esto nos devuelve el número de posición del signo igual. Para tener una cadena que tenga solamente lo que hay detrás del signo igual, utilizamos el método substring()

micookie = micookie.substring(pos+1);

Con esto obtenemos el valor de la cookie buscada.

Todo este proceso podemos ponerlo en una función en la que pasamos como argumento el nombre de la cookie y nos devuelve su valor. La función será la siguiente:

function leerCookie(nombre) {
         var lista = document.cookie.split(";");
         for (i in lista) {
             var busca = lista[i].search(nombre);
             if (busca > -1) {micookie=lista[i]}
             }
         var pos = micookie.indexOf("=");
         var valor = micookie.substring(pos+1);
         return valor;
         }

Con esta función podemos leer fácilmente cualquier cookie, no tenemos más que llamarla y pasar como argumento el nombre de la cookie para obtener su valor:

dato = leerCookie("color");

Almacenamiento Local en HTML5

El nuevo HTML5 resuelve el problema mediante un nuevo método, el del almacenamiento local. Este crea una serie de métodos que almacenan los de datos en el ordenador del usuario de una manera más eficaz, dejando las cookies un tanto obsoletas. Para ver más sobre esto nos remitimos al manual de HTML5.





Aquí acaba el resumen, y con él el manual de javascript, espero que os haya servido de ayuda.

Para continuar, tenemos también un manual de prácticas javascript donde resolvemos algunos casos prácticos habituales.

Podemos seguir también con la sección de Librerías donde se facilita la tarea del programador de javascript.

Otros instrumentos que utilizan javascript y que vienen explicados en esta web son la tecnología de Ajax, y el Canvas del nuevo HTML5.



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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