Como sabemos en Javascript las variables permiten guardar información, sin embargo, esas variables nacen con la carga del navegador y mueren una vez que el usuario abandona la página.

Por ejemplo, pensemos en un sitio con un carrito de compras, supongamos que tenemos una página que muestra un catálogo de televisores y otro de cafeteras. Ahora bien, el usuario agrega un producto a su carrito, un televisor, si lo guardamos en un array de Javascript, en cuanto el usuario cambie a la página de cafeteras los productos agregados al catálogo actuales se borrarán de ese array que ahora ya no existe para nuestro navegador. La solución sería usar un lenguaje de servidor, por ejemplo PHP a través de variables como cookies o sesiones. Sin embargo html5 nos da la posibilidad de guardar datos sin la necesidad de utilizar un lenguaje de servidor.

Comencemos. Existen dos objetos para guardar datos sin importar que se recargue, cambie o abandone la página actual.

sessionStorage

Este objeto permite guardar datos con javascript pero en el servidor. Para que funcione, la página debe ejecutarse en un servidor local o remoto, por ejemplo en mi caso yo usaré Apache con Xampp. Sin embargo no requerirá de código de servidor como php, asp, java, python, ruby, etc.

localStorage

Se comporta igual que sessionStorage, pero la única diferencia es que los datos se guardan en el navegador, por ende no requiere ejecutarse en un servidor. Si por ejemplo creás un archivo .html y lo guardás en cualquier parte de tu computadora como el escritorio debería funcionar sin problemas.

Bien, estos objetos tiene tienen las siguientes propiedades y métodos.

.length

Esta propiedad devuelve la cantidad de item del objeto.

.key()

Método que devuelve el nombre del índice. Recibe un solo parámetro que es justamente el índice.

.getItem()

Devuelve el valor del índice. Recibe como parámetro el nombre del índice.

.setItem()

Permite agregar el valor de un índice. Recibe dos parámetros, el nombre del índice y el valor del mismo.

.removeItem()

Elimina un índice de la memoria. Recibe un parámetro que es el nombre del índice.

.clear()

Elimina todos los índices de la memoria.

Yo voy a usar el objeto sessionStorage porque lo voy a probar en un servidor local, en caso de que lo probés sin servidor local ni remoto deberías usar el objeto localStorage.

Probemos con lo siguiente:

<script type="text/javascript">
   sessionStorage.setItem('nombre', 'Fernando');
</script>

Guardá esto en un archivo .html y ejecutalo en tu navegador.

Ahora volvé a abrir el archivo y modificalo por esto:

<script type="text/javascript">
   alert(sessionStorage.getItem('nombre'));
</script>

Ejecutalo de nuevo. Si te apareció por pantalla el cartel alert con el valor que seteaste en ‘nombre‘, en mi caso ‘Fernando‘, funcionó. Sino probá descargándote alguna de las últimas versiones de tu navegador preferido, yo lo estoy probando con Chrome.

Ahora para borrar ese valor simplemente debemos escribir y ejecutar esto:

<script type="text/javascript">
   sessionStorage.removeItem('nombre');
</script>

¡Listo! El valor se ha eliminado de la memoria.

Otra forma de eliminar los items sería con el método .clear().

Nosotros podríamos hacer esto:

<script type="text/javascript">
    //Seteo las variables
    sessionStorage.setItem('nombre', 'Fernando');
    sessionStorage.setItem('apellido', 'Gaitan');
    sessionStorage.setItem('ciudad', 'Buenos Aires');
    //Las elimino
    sessionStorage.removeItem('nombre');
    sessionStorage.removeItem('apellido');
    sessionStorage.removeItem('ciudad');
</script>

O sino:

<script type="text/javascript">
    //Seteo las variables
    sessionStorage.setItem('nombre', 'Fernando');
    sessionStorage.setItem('apellido', 'Gaitan');
    sessionStorage.setItem('ciudad', 'Buenos Aires');
    //Las elimino
    sessionStorage.clear();
</script>

Ambos casos darían como resultado lo mismo.

Para finalizar haremos un pequeño ejemplo. Habrá un campo de ingreso para el nombre del visitante y tres botones, uno para guardar el nombre en memoria, otro para borrarlo y el último que recargará la página. Además una vez que se recargue la página si el usuario guardo su nombre aparecerá en ese campo de ingreso su nombre:

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript">
       function mostrarNombre(){
          document.getElementById('nombre').value = sessionStorage.getItem('nombre');
       }
       function guardarNombre(){
          document.getElementById('boton_guardar').onclick = function(){
             var nombre = document.getElementById('nombre').value;
             sessionStorage.setItem('nombre', nombre);
             alert('El nombre ha sido guardado.');
          }
       }
       function borrarNombre(){
          document.getElementById('boton_borrar').onclick = function(){
             document.getElementById('nombre').value = '';
             sessionStorage.removeItem('nombre');
          }
       }
       function recargarPagina(){
          document.getElementById('boton_recargar').onclick = function(){
             location.href = '';
          }
       }
       window.onload = function(){
          mostrarNombre();
          guardarNombre();
          borrarNombre();
          recargarPagina();
       }
    </script>
 </head>
 <body>
    <form>
       <label for="nombre"> Por favor indique su nombre </label>
       <input type="text" id="nombre" />
       <input type="button" value="Guardar nombre" id="boton_guardar" />
       <input type="button" value="Borrar nombre" id="boton_borrar" />
       <input type="button" value="Recargar p&aacute;gina" id="boton_recargar" />
    </form>
 </body>
</html>