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.

Nuevo HTML5

Las nuevas tendencias llegan a las páginas web con HTML5.


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: 182

Visitas el mes pasado: 262

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


El futuro del desarrollo web: HTML 5
Desarrollo Web
Manual de HTML5 en español
Alejandro Castillo Cantón
HTML5 Tags
quackit.com
Las novedades de HTML5
Victor Pimentel - Jazztel
HTML5 Novedades en los formularios
BufferOverflow
El sustituto del 'iframe' en HTML5
Gepetto - Globedia
HTML5 drag and drop
w3schools.com
Arrastrar y soltar en HTML5 nativo
html5rocks.com
javascript dataTransfer Description
javascript.gakaa.com
dataTransfer object
help.dottoro.com
localStorage en HTML5
rolandocaldas.com

Donativos

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




HTML 5 (IX)

Almacenamiento local

imagen html5

Definición.

Hasta ahora la forma de almacenar datos de forma local se ha hecho mediante cookies. HTML5 tiene otra forma de almacenar datos de forma local que es mediante la aplicación localStorage. Además de simplificar la forma de crear y guardar datos esta aplicación tiene una serie de ventajas sobre las cookies. veamos cuales son las características de esta aplicación:

El desarrollador o diseñador de la página no puede saber el valor de los datos guardados cuando éstos provienen de un formulario o los ha introducido el usuario, ya que los datos se almacenan directamente en el ordenador del usuario y no se envían al servidor.


Almacenar un nuevo dato.

La aplicación de almacenado de datos se basa en el objeto localStorage, éste con una serie de métodos y propiedades permite hacer todas las operaciones necesarias para manejar los datos.

Los datos constan siempre de un par "clave/valor". el método para almacenar un nuevo dato es:

localStorage.setItem("clave","valor");

Las claves se almacenan en un array y son consideradas como una propiedad del objeto localStorage por lo que también tenemos otras formas de almacenar el dato; como array podemos guardarlo así:

localStorage["clave"]="valor";

y también como propiedad lo guardamos así:

localStorage.clave="valor";

Por ejemplo podemos guardar el dato "nombre: Fernando" de las siguientes maneras:

localStorage.setItem("nombre","Fernando");

localStorage.["nombre"]="Fernando";

localStorage.nombre="Fernando";

Cualquiera de las tres formas es válida, y con esto el dato está ya guardado.


Recuperar el dato

Para recuperar el dato podemos hacerlo también de tres maneras. La primera utilizando el método getItem(), de la siguiente manera:

midato = localStorage.getItem("clave");

También podemos usar el array para recoger el dato:

midato = localStorage["clave"];

Y podemos usar también la clave como una propiedad:

midato = localStorage.clave;

Siguiendo con el ejemplo anterior podemos recuperar el dato de cualquiera de estas tres maneras:

minombre = localStorage.getItem("nombre");

minombre = localStorage["nombre"];

minombre = localStorage.nombre;

Los datos pueden recuperarse en cualquier otra página, y en cualquier otro momento, siempre que se use el mismo dispositivo (ordenador, tablet, etc).


Borrar datos

Los datos mientras no les digamos otra cosa se almacenan de forma permanente y sin fecha de caducidad, por lo que si queremos borrar algún dato debemos hacerlo de forma manual, utilizando el método removeItem() de la siguiente manera:

localStorage.removeItem("clave");

En el ejemplo anterior para borrar el dato haremos lo siguiente:

localStorage.removeItem("nombre")

Debemos pasar como argumento la clave del elemento que queremos borrar. Si la "clave" que pasamos en el argumento no existe el método simplemente no hará nada.


Datos de sesión

El almacenamiento de datos tiene también la opción de guardar los datos sólo mientras dure la sesión del usuario en su navegador. Con esta opción los datos sólo están disponibles mientras el usuario no cierre el navegador.

Al cerrar el navegador los datos se borrar y desaparecen. Mientras el navegador esté abierto los datos pueden verse en las distintas páginas de las distintas ventanas del navegador.

Para almacenar datos de sesión utilizaremos el objeto sessionStorage. Este objeto tiene los mismos métodos y propiedades que localStorage.

Por lo tanto, para guardar un nuevo dato podemos usar cualquiera de estas formas:

sessionStorage.setItem("clave","valor");

sessionStorage["clave"]="valor";

sessionStorage.clave="valor";

Para recuperar el dato podemos hacerlo de cualquiera de estas formas:

midato = sessionStorage.getItem("clave");

midato = sessionStorage["clave"];

midato = sessionStorage.clave;

También podemos borrar el dato antes de que el usuario cierre la sesión:

sessionStorage.removeItem("clave");

Los métodos y propiedades de sessionStorage son los mismos que los de localStorage. Como se ha dicho antes la diferencia entre ambos objetos es que sessionStorage borra los datos cuando el usuario cierra la sessión del navegador, mientras que con localStorage éstos se guardan de manera permanente.


Otros métodos y propiedades


Propiedad length

La propiedad length permite saber el número de datos (pares "clave/valor") que tenemos almacenados. su sintaxis es:

num = localStorage.length;

La variable num nos dice el número de datos que tenemos guardados.


Método key()

El método key() nos permite saber las claves que tenemos guardadas. Las claves se guardan en un array, por lo que como argumento pondremos el número de elemento de la clave.

clave = localStorage.key(0);

Este ejemplo nos devuelve la clave del primer elemento guardado.

Aunque este método no es muy util para buscar claves, sí que puede ser útil para ver todos los datos (pares "clave/valor") que hay guardados. Para ello utilizaremos un bucle que recorra todos los datos. La propiedad length nos dirá cuantos elementos hay guardados y el método key() nos muestra los datos. El código ser parecido a éste:

num=localStorage.length; //número de datos guardados
info=document.getElementById("lista"); //elemento donde sacar los datos en pantalla
info.innerHTML="<ul>"; //principio de lista
for (i=0;i<num;i++) { //bucle para recorrer todos los datos
   clave=localStorage.key(i); //obtener la clave del dato
   valor=localStorage.getItem(clave); //obtener el valor del dato
   info.innerHTML+="<li>"+clave+" : "+valor+"</li>"; //sacar dato en pantalla
   }
info.innerHTML+="</ul>"; //Fin de la lista

En este ejemplo hemos sacado todos los datos guardados en pantalla dentro de una lista.

Siguiendo este mismo ejemplo no nos sería difícil hacer un bucle que borrara todos los datos que tenemos almacenados. Para ello una vez obtenida la clave se le aplicaría el método removeItem(clave).


Guardar datos que no son cadenas

el sistema de almacenamiento de localStorage sólo puede guardar cadenas de texto, por lo que tenemos el problema de querer guardar otro tipo de datos como números, fechas, arrays, etc.

En este caso el navegador convertirá este dato a cadena de texto, por lo que cuando lo recojamos, debemos convertirlo al tipo de dato original para poder usarlo como tal.






Aquí acaba este manual de HTML5. HTML5 es un lenguaje relativamente nuevo y puede que haya algunos aspectos que se hayan quedado sin explicar. Hemos dejado aparte la aplicación "canvas" a la cual, por su extensión, dedicamos otro manual.

Volver a página principal



Manual de HTML5

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