Índice

El almacenamiento temporal

El objeto sessionStorage tiene una funcionalidad idéntica a localStorage. Las diferentes propiedades son parecidas, con la única diferencia de que sessionStorage sustituye a localStorage:

Añadir un valor

sessionStorage.setItem(clave, valor);

Recuperar un valor almacenado

sessionStorage.getItem(clave);

Eliminar un valor almacenado

sessionStorage.removeItem(clave);

Eliminar todos los valores almacenados

sessionStorage.clear();

Ejemplo

Pasar un valor de una página a otra de un sitio es, a menudo, una pesadilla que nos obliga a usar trucos inconfesables o enviar datos al servidor.

El objeto sessionStorage aporta una solución elegante a este problema. De hecho, basta con almacenar, en local, estos datos y recuperarlos en el momento que los necesitemos. ¡Nada más simple!

Veamos un formulario de inicio (pagina1.htm)

images/CAP24IMG10.png

El usuario lo completa y los datos se almacenan en el espacio sessionStorage.

images/CAP24IMG11.png

Echamos un vistazo a las herramientas de desarrollo de Google para asegurarnos (sección Session Storage).

images/CAP24IMG12.png

En otra página del sitio (pagina2.htm), basta con recuperar los valores almacenados.

images/CAP24IMG13.png

El código de pagina1.htm es:

<!DOCTYPE html>  
<html lang="es">  
<head>  
<title>Html5</title>  
<meta charset=utf-8>  
<style type="text/css">  
a { color: black;}  
form.css fieldset { padding: 1em;  
                    width: 290px;   
   ...