Code
Code
Code

hml5 LocalStorage.

Objectiu :  desenvolupar  una petita aplicació  per guardar dades de contacte   en el localStorage,  que funcioni en els principals navegadors, explorer 8, firefox i chrome.

L'html5 portarà un munt de noves funcionalitats,  en aquest tutorial  farem una  petita aplicació  utilitzant la nova funcionalitat :  localStorage.

Amb  l'html5  part de les noves funcionalitats  estan  enfocades a poder crear aplicacions web. La propietat localStorage a hores d'ara és  de les poques que  suporten tant Chrome, com firefox,  com explorer 8,  per tant  m'ha semblat un bon punt d'inici,  al ser una funcionalitat  realment aplicable.

L'objetce localStorage,  guarda  informació  vinculada  al  domini  de la pàgina.

localStorage.getItem(clau);    //  obte  el valor desat  per la clau en  el domini de la pàgina
localStorage.setItem(clau,valor); //  guarda un valor  amb la clau, i en el domini de la pàgina.


Utilitzarem el localStorage i el JSON per fer una agenda ben senzilla,  la idea és crear una array de noms i correus electrònics,  cada cop que es modifiqui la convertirem a JSON i la desarem  al localStorage amb la clau  agenda, i cada cop que es carregui la pàgina recuperarem del localStorage  la cadena JSON  i la tornarem a convertir en un array.  D'aquesta manera tindrem una agenda persintent utilitzant el localStorage de l'HTML5.


Per començar   crearem  un  petit formulari  dins d'una taula per entrar les dades:

<table>
<tbody>
<tr>
<th>Nom</th><th>Email</th><th>&nbsp;</th>
</tr>
<tr>
<td>Nom <input /></td>
<td>Email <input /></td>
<td><input /></td>
</tr>
</tbody>
</table>


Per Gestionar l'aplicació crearem un objecte per englobar tota la logica del programa,

  1. var gestor_agenda = {
  2.   local : {}
  3. }


Definim una propietat local,  on guardarem un accés a localStorage,  per unificar l'accés des dels diferents navegadors.



Per començar  definirem un metode d'inicialització :

  1.     init : function(){
  2.         local = this.local = localStorage;
  3.         if(window.localStorage)local = window.localStorage;
  4.         json_agenda = local.getItem("agenda");
  5.         if(json_agenda) agenda = JSON.parse(json_agenda);
  6.         if(!agenda)agenda= new Array();
  7.         for(actual in agenda){
  8.             gestor_agenda.afegircamp("#control",agenda[actual].nom,agenda[actual].email);
  9.         }
  10.         $("td span.esborrar").live("click",gestor_agenda.esborrar);
  11.         $("#guardar").click(gestor_agenda.afegir);
  12.     },


Guardem l'accés a localStorage,  tan si  està definida globalment, com si  és una propietat de l'objtecte window.
Un cop tenim accés a localStorage recuperem les dades guardades, si ni hi ha,  amb el metode local.getItem,  les dades les guardarem amb la clau "agenda".
Si  hi ha dades decodifiquem les dades en json,  per poder-les utilitzar en  l'script,  si no n'hi ha creem un array buit.
Recorrem l'array,  amb les dades per omplir la taula.
I inicialitzem els events  per gestionar  l'script.  Important  l'utilització del live.  (api.jquery.com/live)

  1.     afegircamp : function(selector,nom,email){
  2.         $(selector).before($("" nom "" email "[delete]").data("dades",{nom:nom,email:email}));
  3.     },


Aquesta funció, simplement afegeix una fila  més a la taula amb les dades epecificades,  aprofitem per vincular la informació,  per utilitzar-la posteriorment.

  1.     afegir : function(){
  2.         var nom = $("#nom").val();
  3.         var email = $("#email").val();
  4.         agenda.push({nom:nom,email:email});
  5.         gestor_agenda.local.setItem("agenda",JSON.stringify(agenda));
  6.         $("#email").val("");
  7.         $("#nom").val("");
  8.         gestor_agenda.afegircamp("#control",nom,email);
  9.     }


funció que gestiona l'event de click en el boto afegir,  recupera la informació que hi ha en els camps i la desa en el localStorage,  alhora que l'afegeix a la taula.

agenda.push :  l'afegeix a l'array.
JSON.strigify(agenda);  converteix l'array en una cadena JSON.
gestor_agenda.local.setItem  sobrescrivim l'anterior valor amb l'actual.

  1.     esborrar : function(){
  2.         agenda = new Array();
  3.         var a = $(this).parent().parent().siblings();
  4.         $(this).parent().parent().remove();
  5.         a.each(function(){ 
  6.             dades = $(this).data("dades");
  7.             agenda.push(dades); 
  8.         });
  9.         gestor_agenda.local.setItem("agenda",JSON.stringify(agenda));
  10.     },


Esborrar la filera de la taula,  despres recuperant la informació desada amb data refem l'array per tornar-lo  a guardar.
Consideracions a tenir en compte :
Amb firefox i explorer,  el localStorage no funciona per fitxers locals,  només amb  dominis.  Amb el chrome funciona amb pàgines locals correctament.

Tot junt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
 <script type="text/javascript" src="json2.js"></script>
 <script type="text/javascript">
   var agenda;
     
$(document).ready(function(){
      gestor_agenda.init();
});

var gestor_agenda = {
    local : {},

    init : function(){
        local = this.local = localStorage;
        if(window.localStorage)local = window.localStorage;
        json_agenda = local.getItem("agenda");
        if(json_agenda) agenda = JSON.parse(json_agenda);
        if(!agenda)agenda= new Array();
        for(actual in agenda){
            gestor_agenda.afegircamp("#control",agenda[actual].nom,agenda[actual].email);
        }
        $("td span.esborrar").live("click",gestor_agenda.esborrar);
        $("#guardar").click(gestor_agenda.afegir);
    },

    afegircamp : function(selector,nom,email){
        $(selector).before($("<tr><td>"+nom+"</td><td>"+email+"</td><td><span class='esborrar'>[delete]</span></td></tr>").data("dades",{nom:nom,email:email}));
    },

    afegir : function(){
        var nom = $("#nom").val();
        var email = $("#email").val();
        agenda.push({nom:nom,email:email});
        gestor_agenda.local.setItem("agenda",JSON.stringify(agenda));
        $("#email").val("");
        $("#nom").val("");
        gestor_agenda.afegircamp("#control",nom,email);
    }

    esborrar : function(){
        agenda = new Array();
        var a = $(this).parent().parent().siblings();
        $(this).parent().parent().remove();
        a.each(function(){ 
            dades = $(this).data("dades");
            agenda.push(dades); 
        });
        gestor_agenda.local.setItem("agenda",JSON.stringify(agenda));
    },


}

 </script>
 
 <style>
 table { width:600px; border: 1px thin #666666; margin:20px; }
 th { background-color:#990000; color:#FFFFFF; }
 .esborrar { cursor:pointer;}
 </style>
    </head>
  <body>
 
<table id="dades">
<tr><th>Nom</th><th>Email</th><th></th></tr>
<tr id="control"><td> Nom <input type="text" name="nom" id="nom"  /></td><td>Email <input type="text" name="email" id="email"  /></td><td><input type="submit" id="guardar" ></td></tr>
</table>
  
  </body>
</html>

Comunicatek - - La Bisbal d’Empordà - dani@comunicatek.com - Sobre code - Nota legal