viernes, 29 de abril de 2016

API Web Storage con HTML, CSS y JavaScript - 1 de 2



Dos sistemas de almacenamiento

La Web fue primero pensada como una forma de mostrar información, solo mostrarla. El procesamiento de información comenzó luego, primero con aplicaciones del lado del servidor y más tarde, de forma bastante ineficiente, a través de pequeños códigos y complementos (plug-ins) ejecutados en el ordenador del usuario. Sin embargo, la esencia de la Web siguió siendo básicamente la misma: la información era preparada en el servidor y luego mostrada a los usuarios. El trabajo duro se desarrollaba casi completamente del lado del servidor porque el sistema no aprovechaba los recursos en los ordenadores de los usuarios.
HTML5 equilibra esta situación. Justificada por las particulares características de los dispositivos móviles, el surgimiento de los sistemas de computación en la nube, y la necesidad de estandarizar tecnologías e innovaciones introducidas por plug-ins a través de los últimos años, la especificación de HTML5 incluye herramientas que hacen posible construir y ejecutar aplicaciones completamente funcionales en el ordenador del usuario, incluso cuando no existe conexión a la red disponible.
Una de las características más necesitadas en cualquier aplicación es la posibilidad de almacenar datos para disponer de ellos cuando sean necesarios, pero no existía aún un mecanismo efectivo para este fin. Las llamadas “Cookies” (archivos de texto almacenados en el ordenador del usuario) fueron usadas por años para preservar información, pero debido a su naturaleza se encontraron siempre limitadas a pequeñas cadenas de texto, lo que las hacía útiles solo en determinadas circunstancias.
La API Web Storage es básicamente una mejora de las Cookies. Esta API nos permite almacenar datos en el disco duro del usuario y utilizarlos luego del mismo modo que lo haría una aplicación de escritorio. El proceso de almacenamiento provisto por esta API puede ser utilizado en dos situaciones particulares: cuando la información tiene que estar disponible solo durante la sesión en uso, y cuando tiene que ser preservada todo el tiempo que el usuario desee. Para hacer estos métodos más claros y comprensibles para los desarrolladores, 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 duración de la sesión de una página. De hecho, a diferencia de sesiones reales, la información almacenada a través de este mecanismo es solo accesible desde una única ventana o pestaña y es preservada hasta que la ventana es cerrada. La especificación aún nombra “sesiones” debido a que la información es preservada incluso cuando la ventana es actualizada o una nueva página desde el mismo sitio web es cargada.
  • 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 aplicación que los creó. 

Ambos mecanismos trabajan a través de la misma interface, compartiendo los mismos métodos y propiedades. Y ambos son dependientes del origen, lo que quiere decir que la información está disponible solo a través del sitio web o la aplicación que los creó. Cada sitio web tendrá designado su propio espacio de almacenamiento que durará hasta que la ventana es cerrada o será permanente, de acuerdo al mecanismo utilizado.
La API claramente diferencia datos temporarios de permanentes, facilitando la construcción de pequeñas aplicaciones que necesitan preservar solo unas cadenas de texto como referencia temporaria (por ejemplo, carros de compra) o aplicaciones más grandes y complejas que necesitan almacenar documentos completos por todo el tiempo que sea necesario.
IMPORTANTE: Muchos navegadores solo trabajan de forma adecuada con esta API cuando la fuente es un servidor real. Para probar los siguientes códigos, le recomendamos que primero suba los archivos a su servidor.


La sessionStorage

Esta parte de la API, sessionStorage, es como un reemplazo para las Cookies de sesión.
Las Cookies, así como sessionStorage, mantienen los datos disponibles durante un período específico de tiempo, pero mientras las Cookies de sesión usan el navegador como referencia, sessionStorage usa solo una simple ventana o pestaña. Esto significa que las Cookies creadas para una sesión estarán disponibles mientras el navegador continúe abierto, mientras que los datos creados con sessionStorage estarán solo disponibles mientras la ventana que los creó no es cerrada.


Implementación de un sistema de almacenamiento de datos 

Debido a que ambos sistemas, sessionStorage y localStorage, trabajan con la misma interface, vamos a necesitar solo un documento HTML y un simple formulario para probar los códigos y experimentar con esta API:

Código 10-1. Plantilla para la API Storage

<!DOCTYPE html>
<html lang="es">
<head>
<title>Web Storage API</title>
<link rel="stylesheet" href="storage.css">
<script src="storage.js"></script>
</head>
<body>
<section id="cajaformulario">
<form name="formulario">
<p>Clave:<br><input type="text" name="clave" id="clave"></p>
<p>Valor:<br><textarea name="text" id="texto"></textarea></p>
<p><input type="button" name="grabar" id="grabar"
value="Grabar"></p>
</form>
</section>
<section id="cajadatos">
No hay información disponible
</section>
</body>
</html>

También crearemos un grupo de reglas de estilo simples para dar forma a la página y diferenciar el área del formulario de la caja donde los datos serán mostrados y listados:

Código 10-2. Estilos para nuestra plantilla.

#cajaformulario{
float: left;
padding: 20px;
border: 1px solid #999999;
}
#cajadatos{
float: left;
width: 400px;
margin-left: 20px;
padding: 20px;
border: 1px solid #999999;
}
#clave, #texto{
width: 200px;
}
#cajadatos > div{
padding: 5px;
border-bottom: 1px solid #999999;
}

Hágalo usted mismo: Cree un archivo HTML con el Código 10-1 y un archivo CSS llamado storage.css con los estilos del Código 10-2. También necesitará crear un archivo llamado storage.js para grabar y probar los códigos Javascript presentados a continuación.


Creando datos

Ambos, sessionStorage y localStorage, almacenan datos como ítems. Los ítems están formados por un par clave/valor, y cada valor será convertido en una cadena de texto antes de ser almacenado. Piense en ítems como si fueran variables, con un nombre y un valor, que pueden ser creadas, modificadas o eliminadas.
Existen dos nuevos métodos específicos de esta API incluidos para crear y leer un valor en el espacio de almacenamiento:
  • setItem(clave, valor) Este es el método 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 método puede utilizarse también para modificar datos previos.
  • getItem(clave) Para obtener el valor de un ítem, debemos llamar a este método especificando la clave del ítem que queremos leer. La clave en este caso es la misma que declaramos cuando creamos al ítem con setItem().


Código 10-3. Almacenando y leyendo datos.

function iniciar(){
var boton=document.getElementById('grabar');
boton.addEventListener('click', nuevoitem, false);
}
function nuevoitem(){
var clave=document.getElementById('clave').value;
var valor=document.getElementById('texto').value;
sessionStorage.setItem(clave,valor);
mostrar(clave);
}
function mostrar(clave){
var cajadatos=document.getElementById('cajadatos');
var valor=sessionStorage.getItem(clave);
cajadatos.innerHTML='<div>'+clave+' - '+valor+'</div>';
}
window.addEventListener('load', iniciar, false);

El proceso es extremadamente simple. Los métodos son parte de sessionStorage y son llamados con la sintaxis sessionStorage.setItem(). En el Código 10-3, la función nuevoitem() es ejecutada cada vez que el usuario hace clic en el botón del formulario. Esta función crea un ítem con la información insertada en los campos del formulario y luego llama a la función mostrar(). Esta última función lee el ítem de acuerdo a la clave recibida usando el método getItem() y muestra su valor en la pantalla.
Además de estos métodos, la API también ofrece una sintaxis abreviada para crear y leer ítems desde el espacio de almacenamiento. Podemos usar la clave del ítem como una propiedad y acceder a su valor de esta manera.
Este método usa en realidad dos tipos de sintaxis diferentes de acuerdo al tipo de información que estamos usando para crear el ítem. Podemos encerrar una variable representando la clave entre corchetes (por ejemplo, sessionStorage[clave]=valor) o podemos usar directamente el nombre de la propiedad (por ejemplo, sessionStorage.miitem=valor).

Código 10-4. Usando un atajo para trabajar con ítems.

function iniciar(){
var boton=document.getElementById('grabar');
boton.addEventListener('click', nuevoitem, false);
}
function nuevoitem(){
var clave=document.getElementById('clave').value;
var valor=document.getElementById('texto').value;
sessionStorage[clave]=valor;
mostrar(clave);
}
function mostrar(clave){
var cajadatos=document.getElementById('cajadatos');
var valor=sessionStorage[clave];
cajadatos.innerHTML='<div>'+clave+' - '+valor+'</div>';
}
window.addEventListener('load', iniciar, false);


Leyendo datos

El anterior ejemplo solo lee el último ítem grabado. Vamos a mejorar este código aprovechando más métodos y propiedades provistos por la API con el propósito de manipular ítems:
  • length Esta propiedad retorna el número de ítems guardados por esta aplicación 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 automático que comienzo por 0. Con este método podemos leer un ítem específico o crear un bucle para obtener toda la información almacenada.


Código 10-5. Lstando ítems.

function iniciar(){
var boton=document.getElementById('grabar');
boton.addEventListener('click', nuevoitem, false);
mostrar();
}
function nuevoitem(){
var clave=document.getElementById('clave').value;
var valor=document.getElementById('texto').value;
sessionStorage.setItem(clave,valor);
mostrar();
document.getElementById('clave').value='';
document.getElementById('texto').value='';
}
function mostrar(){
var cajadatos=document.getElementById('cajadatos');
cajadatos.innerHTML='';
for(var f=0;f<sessionStorage.length;f++){
var clave=sessionStorage.key(f);
var valor=sessionStorage.getItem(clave);
cajadatos.innerHTML+='<div>'+clave+' - '+valor+'</div>';
}
}
window.addEventListener('load', iniciar, false);

El propósito del código 10-5 es mostrar un listado completo de los ítems en la caja derecha de la pantalla. La función mostrar() fue mejorada usando la propiedad length y el método key(). Creamos un bucle for que va desde 0 al número de ítems que existen en el espacio de almacenamiento. Dentro del bucle, el método key() retornará la clave que nosotros definimos para cada ítem. Por ejemplo, si el ítem en la posición 0 del espacio de almacenamiento fue creado con la clave “miitem”, el código sessionStorage.key(0) retornará el valor “miitem”. Llamando a este método desde un bucle podemos listar todos los ítems en la pantalla con sus correspondientes claves y valores. 
La función mostrar() es llamada desde la función iniciar() tan pronto como la aplicación es ejecutada. De este modo podremos ver desde el comienzo los ítems que fueron grabados previamente en el espacio de almacenamiento. 
Hágalo usted mismo: Aproveche los conceptos estudiados con la API Forms en el Capítulo 6 para controlar la validez de los campos del formulario y no permitir la inserción de ítems vacíos o inválidos.



Espero haber ayudado en algo. Hasta la próxima oportunidad!











  

2 comentarios:

  1. Hola, mi nombre es Anónimo. Puede ser que te estés robando todos los tutoriales de youtube. En realidad soy policía virtual y estoy investigando el caso de robo de códigos. Todas mis hipótesis me llevaron a tu página y tengo que decirte que has de estar detenido. Te informo que tu página será dada de baja en los próximos días. Espero que tu pago se realice a mi cuenta bancaria dentro de poco.

    CBU:25484748915144551355

    No te retrase,
    Anónimo.

    ResponderEliminar
    Respuestas
    1. Hola Anónimo, gracias por la visita y el aporte de tu comentario!!
      Los mejores deseos! Hasta cualquier momento!

      Eliminar