[HTML5] Trabajando con el storage de HTML5, almacenando en JSON – Parte II

En el post pasado (míralo acá) se hizo una introducción al nuevo storage disponible en HTML5, el cual es realmente bastante sencillo de trabajar, así que en este artículo quiero mostrar como podemos almacenar datos en formato JSON en el storage, además como ya es bien conocido JSON se esta volviendo cada vez más importantes cuando trabajamos en aplicaciones Web.

Bien lo primero es referencias los archivos JavaScript necesarios, en este caso la librería core de jQuery y a librería json2.js.

   1:  <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

   2:  <script type="text/javascript" src="js/json2.js"></script>

Luego, vamos a crear un formulario muy sencillo para recibir los datos de un usuario, el HTML sería:

   1:  <fieldset style="width:300px;">

   2:      <legend>Registro</legend>        

   3:      <table>

   4:          <tr>

   5:              <td><b>Nombres:</b></td>

   6:              <td><input type="text" id="txtNombre" /></td>

   7:          </tr>

   8:          <tr>

   9:              <td><b>Apellidos:</b></td>

  10:              <td><input type="text" id="txtApellidos" /></td>

  11:          </tr>

  12:          <tr>

  13:              <td><b>Email:</b></td>

  14:              <td><input type="text" id="txtEmail" /></td>

  15:          </tr>

  16:          <tr>

  17:              <td><b>Twitter:</b></td>

  18:              <td><input type="text" id="txtTwitter" /></td>

  19:          </tr>

  20:          <tr>

  21:              <td colspan="2">

  22:                  <input type="button" id="btnGuardar" value="Guardar"/>|

  23:                  <input type="button" id="btnRecuperar" value="Recuperar"/>

  24:              </td>

  25:          </tr>

  26:      </table>

  27:  </fieldset>

Como se puede observar, en la parte inferior tenemos dos botones, uno para guardar los datos y el otro para recuperarlos y mostrarlos en el formulario, en resumen el código JavaScript es:

   1:  $(document).on("ready", function(){

   2:      var nombres = $("#txtNombre");

   3:      var apellidos = $("#txtApellidos");

   4:      var email = $("#txtEmail");

   5:      var twitter = $("#txtTwitter");

   6:                  

   7:      $("#btnGuardar").on("click", function(){

   8:          var usuario = new Object();

   9:          usuario.nombres = nombres.val();

  10:          usuario.apellidos = apellidos.val();

  11:          usuario.email = email.val();

  12:          usuario.twitter = twitter.val();                

  13:          window.sessionStorage.setItem("usuario",JSON.stringify(usuario));

  14:          LimpiarFormulario();

  15:      })

  16:                  

  17:      $("#btnRecuperar").on("click", function(){

  18:          var usuario = new Object();

  19:          usuario = JSON.parse(window.sessionStorage.getItem("usuario"));

  20:          nombres.val(usuario.nombres);

  21:          apellidos.val(usuario.apellidos);

  22:          email.val(usuario.email);

  23:          twitter.val(usuario.twitter);

  24:      })

  25:              

  26:      function LimpiarFormulario()

  27:      {

  28:          nombres.val('');

  29:          apellidos.val('');

  30:          email.val('');

  31:          twitter.val('');

  32:      }

  33:  })

Como se puede observar el código es bastante sencillo, lo único a comentar es en la línea 13 convertimos el objeto usuario a un objeto en JSON con JSON.stringify, y la otra línea importante es la número 19, en donde convertimos el objeto JSON almacenado a un Objeto en JavaScript.

Espero les sea de utilidad, como siempre les dejo el código del ejemplo:

Descarga el ejemplo!