API Web Storage

19
API WEB STORAGE FUNDAMENTOS DE LA PROGRAMACIÓN EN INTERNET UNIVERSIDAD DE EL SALVADOR FACULTAD MULTIDISCIPLINARIA DE OCCIDENTE DEPARTAMENTO DE INGENIERIA Y ARQUITECTURA

description

API WEB STORAGE

Transcript of API Web Storage

API WEB STORAGEFUNDAMENTOS DE LA PROGRAMACIN EN INTERNETUNIVERSIDAD DE EL SALVADORFACULTAD MULTIDISCIPLINARIA DE OCCIDENTEDEPARTAMENTO DE INGENIERIA Y ARQUITECTURA1IntroduccinLa Web:Mostrar informacinAplicaciones del lado del servidorPlugins

HTML5 equilibra la situacin.CookiesCookies (archivos de texto almacenados en el ordenador del usuario) fueron usadas por aos para preservar informacin, pero debido a su naturaleza se encontraron siempre limitadas a pequeas cadenas de texto, lo que las haca tiles solo en determinadas circunstancias

sessionStorage y localStorageLa API Web Storage es bsicamente una mejora de las Cookies.La API fue dividida en dos partes llamadas sessionStorage y localStorage.sessionStorage Este es un mecanismo de almacenamiento que conservar los datos disponible solo durante la duracin de la sesin de una pgina.localStorage Este mecanismo trabaja de forma similar a un sistema de almacenamiento para aplicaciones de escritorio. Los datos son grabados de forma permanente y se encuentran siempre disponibles para la aplicacin que los cre.sessionStoragesessionStorage, es como un reemplazo para las Cookies de sesin.Los datos creados con sessionStorage estarn solo disponibles mientras la ventana que los cre no escerrada.

La sessionStorageImplementacin de un sistema de almacenamiento de datos

Tambin crearemos un grupo de reglas de estilo simples para dar forma a la pgina y diferenciar el rea del formulario de la caja donde los datos sern mostrados y listados:Creando datosExisten dos nuevos mtodos especficos de esta API incluidos para crear y leer un valor en el espacio de almacenamiento:setItem(clave, valor) Este es el mtodo que tenemos que llamar para crear un tem. El tem ser creado con una clave y un valor de acuerdo a los atributos especificados. Si ya existe un tem con la misma clave, ser actualizado al nuevo valor, por lo que este mtodo puede utilizarse tambin para modificar datos previos.getItem(clave) Para obtener el valor de un tem, debemos llamar a este mtodo especificando la clave del tem que queremos leer. La clave en este caso es la misma que declaramos cuando creamos al tem con setItem().

Leyendo datosEl anterior ejemplo solo lee el ltimo tem grabado. Vamos a mejorar este cdigo aprovechando ms mtodos y propiedades provistos por la API con el propsito de manipular tems:length Esta propiedad retorna el nmero de tems guardados por esta aplicacin en el espacio de almacenamiento. Trabaja exactamente como la propiedad length usada normalmente en Javascript para procesar arrays, y es til para lecturas secuenciales.key(ndice) Los tems son almacenados secuencialmente, enumerados con un ndice automtico que comienzo por 0. Con este mtodo podemos leer un tem especfico o crear un bucle para obtener toda la informacin almacenada.

Eliminando datosLos tems pueden ser creados, ledos y, por supuesto, eliminados. Es hora de ver cmo eliminar un tem. La API ofrece dos mtodos para este propsito:removeItem(clave) Este mtodo eliminar un tem individual. La clave para identificar el tem es la misma declarada cuando el tem fue creado con el mtodo setItem().clear() Este mtodo vaciar el espacio de almacenamiento. Todos los tems sern eliminados.

localStoragePara cubrir este aspecto, Storage API ofrece un segundo sistema que reservar un espacio de almacenamiento para cada aplicacin (cada origen) y mantendr la informacin disponible permanentemente. Con localStorage, finalmente podemos grabar largas cantidades de datos y dejar que el usuario decida si la informacin es til y debe ser conservada o no.

Evento storage

storage Este evento ser disparado por la ventana cada vez que un cambio ocurra en el espacio de almacenamiento. Puede ser usado para informar a cada ventana abierta con la misma aplicacin que los datos han cambiado en el espacio de almacenamiento y que se debe hacer algo al respecto.Espacio de almacenamientoLa informacin almacenada por localStorage ser permanente a menos que el usuario decida que ya no la necesita.Esto significa que el espacio fsico en el disco duro ocupado por esta informacin probablemente crecer cada vez que la aplicacin sea usada. Hasta este momento, la especificacin de HTML5 recomienda a los fabricantes de navegadores que reserven un mnimo de 5 megabytes para cada origen (cada sitio web o aplicacin).