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;   
  ...
Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
El almacenamiento persistente
Siguiente
Presentación