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:

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

#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;
}

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. Piensa 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().

Ejm 10.3

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 ejm 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).

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.

Ejm 10.5

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 ejm 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.

Eliminando datos

Los ítems pueden ser creados, leídos y, por supuesto, eliminados. Es hora de ver cómo eliminar un ítem. La API ofrece dos métodos para este propósito:

  • removeItem(clave): este método eliminará un ítem individual. La clave para identificar el
    ítem es la misma declarada cuando el ítem fue creado con el método setItem().
  • clear(): Este método vaciará el espacio de almacenamiento. Todos los ítems serán eliminados.

Ejm 10.6

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='<div><button
onclick="eliminarTodo()">Eliminar Todo</button></div>';
for(var f=0;f<sessionStorage.length;f++){
var clave=sessionStorage.key(f);
var valor=sessionStorage.getItem(clave);
cajadatos.innerHTML+='<div>'+clave+' - '+valor+'<br><button
onclick="eliminar(\''+clave+'\')">Eliminar</button></div>';
}
}
function eliminar(clave){
if(confirm('Está Seguro?')){
sessionStorage.removeItem(clave);
mostrar();
}
}
function eliminarTodo(){
if(confirm('Está Seguro?')){
sessionStorage.clear();
mostrar();
}
}
window.addEventListener('load', iniciar, false);

Las funciones iniciar() y nuevoitem() del ejm de arriba son las mismas de códigos previos. Solo la función mostrar() cambia para incorporar el manejador de eventos onclick y llamar a las funciones que eliminarán un ítem individual o vaciarán el espacio de almacenamiento. La lista de ítems presentada en pantalla es construida de la misma manera que antes, pero esta vez un botón  Eliminar” es agregado junto a cada ítem para poder eliminarlo. Un botón para eliminar todos los ítems juntos también fue agregado en la parte superior.

Las funciones eliminar() y eliminarTodo() se encargan de eliminar el ítem seleccionado o limpiar el espacio de almacenamiento, respectivamente. Cada función llama a la función mostrar() al final para actualizar la lista de ítems en pantalla.

El sistema sessionStorage preserva los datos creados en una ventana solo hasta que esa ventana es cerrada. Es útil para controlar carros de compra o cualquier otra aplicación que requiere acceso a datos por períodos cortos de tiempo.