UNIVERSIDAD DE EL SALVADOR

FACULTAD MULTIDISCIPLINARIA DE OCCIDENTE

DEPARTAMENTO DE INGENIERIA Y ARQUITECTURA

API WEB STORAGE

FUNDAMENTOS DE LA PROGRAMACIN EN
INTERNET

Introduccin
La Web:
Mostrar informacin
Aplicaciones del lado del servidor
Plugins

HTML5 equilibra la situacin.

Cookies
Cookies (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 localStorage
La 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.

sessionStorage, es como un reemplazo para las

sessionStorag
e

Cookies de sesin.
Los datos creados con sessionStorage estarn
solo disponibles mientras la ventana que los cre no
es
cerrada.

La sessionStorage
Implementacin 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 datos
Existen 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 datos
El 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 datos
Los 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.

Para cubrir este aspecto, Storage API ofrece un segundo

sistema que reservar un espacio de almacenamiento

localStorage

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 almacenamiento
La 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).