Web storage es un API de HTML5 que nos permite guardar datos estructurados en el cliente. Sustituye a las famosas cookies que son enviadas en las cabeceras HTTP. Los datos almacenados en disco solo podrán ser accedidos desde el cliente y no desde el servidor, se busca con esto aumentar la seguridad de la información enviada, además el tamaño de los datos almacenados en disco podrá ser mayor, aproximadamente de 5 Mb.

Web Storage define dos tipos de almacenamiento: sessionStorage y localStorage

sessionStorage

La información manejada mediante este mecanismo podrá ser accedida solo durante la sesión y en caso de tener varias ventanas abiertas la información mostrada en cada una de ellas podrá ser distinta. Los datos se perderán una vez se cierre el navegador.

localStorage

Permite guardar datos que podrán ser accedido una vez cerremos el navegador. La información será la misma en todas las ventanas abiertas dentro de una misma sesión.

Tanto sessionStorage como localStorage pueden hacer uso de los siguientes métodos y atributos:

• setItem (setItem(key, value)): Permite almacenar un valor para una clave dada
• geItem (geItem(key)): Permite recuperar un valor de clave dada
• removeItem (removeItem(key)): Bora una clave y su valor
• clear (clear()): Borra todas las claves almacenadas
• length Este atributo nos permite calcular el número de claves guardadas
• key (key(index)): Permite recuperar una clave pasándole un índice determinado. Mediante un bucle y el uso de este método podremos recuperar todas las claves guardadas en nuestro disco.

  Código JavaScript

  
  for (var i= 0; i < localStorage.length; ++ i){
      claves[i] = localStorage.key(i)
  }
       

Respecto al soporte que ofrecen los navegadores web para esta API lo podéis ver en la siguiente tabla: Fuente: caniuse.com

Después de 120 días sin escribir :X, por fin me he dignado a escribir un post que espero que le pueda servir a alguien de ayuda, por lo menos a un eulalio que yo me se XD. Voy a escribir un post sobre como hacer validaciones en tiempo real, es decir, no esperaremos a que el usuario envíe el formulario sino que iremos validando cada uno de los campos según se vaya introduciendo la información. Para ver esto hare una demo apoyándome en la librería jQuery, que no solo nos da la posibilidad de realizar fáciles validaciones al momento sino que además nos permite jugar con una gran variedad de atractivos efectos.

Ejemplo de validaciones con jQuery

Como ya he dicho en la introducción queremos conseguir una validación de formulario en tiempo real, es decir cada vez que un campo del formulario pierda el foco, automáticamente comprobaremos que el campo modificado es correcto, además comprobaremos que todos los campos que preceden a este no se encuentran vacios y que la información es correcta. Con esto mejoraremos la experiencia de usuario ya que avisamos en el mismo momento de cada uno de los errores que está cometiendo al introducir los datos en los campos del formulario y estaremos evitando el tener que realizar varios envíos del form ya que se produjeron fallos en la validación de campos obligatorios.

Dentro de un formulario podemos fijar una serie de campos que sean de tipo obligatorio y sin los cuales el envío del formulario no es posible, pues bien en el ejemplo además de definir campos de tipo obligatorios y mostrar los errores producidos por los mismos, mantendremos informado al usuario con avisos de que la información introducida en un campo no obligatorio no es del todo correcta. En el ejemplo el usuario podrá enviar el formulario en caso de tener avisos pero no en el caso de que el formulario cuente con errores en campos de tipo obligatorio. En todo momento tendremos visible un listado de errores que mostrará al usuario el estado en el que se encuentra cada uno de los campos del formulario.

Este es un ejemplo de referencia y no aplicable a cualquier tipo de formulario ya que según vaya variando el código HTML del formulario habrá que realizar adaptaciones en el código JavaScript, de todas formas podréis ver que gracias a la sencillez de jQuery la adaptación de código según el formulario no es tan complicada.
A continuación os muestro como quedaría el formulario con las validaciones:

Descargar ejemplo: demo_validaciones.js (39,52kb)