Salvare dati in locale e sincronizzarli...

Discussione in 'Javascript' iniziata da Bivio, 10 Gennaio 2014.

  1. Bivio

    Bivio Utente Attivo

    Registrato:
    19 Maggio 2010
    Messaggi:
    91
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Salve, mi scuso se ho sbagliato sezione ma non sapevo dove inserire la discussione. In pratica vorrei realizzare un app web che funzioni sia quando l'utente è connesso a internet che quando è offline, in questo sito andrò ad archiviare dei dati in un database mysql, dove poi andrò ad elaborare. Fin qui tutto bene, ora vorrei dare la possibilità di utilizzare il sito anche come app mobile quindi di poterla utilizzare anche sui propri smartphone, e vorrei fare in modo che quando l'utente è connesso invia i dati direttamente sul server, mentre se non lo è li salva e appena si connette a internet invia i dati salvati in locale aggiornado quel sul server... qui iniziano i primi dubbi:

    1) Ho letto che con html5 e possibili utilizzare il metodo local storage, secondo voi va bene?
    2) Da quello che ho capito local storage salva solo l'ultimo dato, i vorrei tenere in memoria alcuni dati e sia i nuovi dati salvati senza connessione e in attesa di sincronizzazione con il server, e fattibile?

    Es.
    Dati fissi:
    Nome utente: Luca
    Campo tabella 1: 10
    Campo tabella 4 : nota

    Dati offline:
    id_utente:
    campo_1 = "15"
    campo_4 = "prova"

    Spero di essere stato chiaro...sapete darmi qualche consiglio in merito?
     
  2. LorenzoPi

    LorenzoPi Utente Attivo

    Registrato:
    21 Gennaio 2014
    Messaggi:
    98
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    localStorage non salva l'ultimo dato! puoi creare diverse variabili tramite localStorage dove ognuna delle quali salva il dato corrispondente. ad esempio:
    HTML:
    localStorage.setItem('id_utente',JSON.stringify(1));
    localStorage.setItem('campo_1',JSON.stringify('15'));
    localStorage.setItem('campo_4',JSON.stringify('prova'));
    e poi per riprendere i valori usi:
    HTML:
    var id = JSON.parse(localStorage.getItem('id_utente'));    // restituisce 1
    var campo_1 = JSON.parse(localStorage.getItem('campo_1'));    // restituisce '15'  
    var campo_4 = JSON.parse(localStorage.getItem('campo_4'));    // restituisce 'prova'
     
  3. Bivio

    Bivio Utente Attivo

    Registrato:
    19 Maggio 2010
    Messaggi:
    91
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Ciao, grazie per la risposta. Quindi potrei utilizzarlo come una sorta di database, l'unico limite sono i 5mb di spazio disponibile giusto? Sapresti indicarmi qualche guida al riguardo?
     
  4. LorenzoPi

    LorenzoPi Utente Attivo

    Registrato:
    21 Gennaio 2014
    Messaggi:
    98
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Si massimo sono 5 MB! Comunque io non ho seguito una guida in particolare! ho cercato un pò su internet! potresti dare un'occhiata qui e qui però conviene che cerchi anche su internet :)
     
    Ultima modifica: 22 Gennaio 2014
  5. Bivio

    Bivio Utente Attivo

    Registrato:
    19 Maggio 2010
    Messaggi:
    91
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Sto provando con :

    Codice:
    <script type="text/javascript">function salva(){
         var nome = $('[name="nome"]').val();
         var email = $('[name="email"]').val();
         var nota = $('[name="nota"]').val();
         
         localStorage.setItem("nome", nome);
         localStorage.setItem("email", email);
         localStorage.setItem("nota", nota);
    
    
        return false;
        } 
    </script>
    </head>
    <body>
    <form>
        <p><label>Nome</label></p>
        <p><input name="nome" type="text" id="nome" /></p>
        <p><label>email</label></p>
        <p><input name="email" type="text" id="email" /></p>
        <p><label>Nota</label></p>
        <p><input name="nota" type="text" id="nota" /></p>
        <p><input type="button" value="Invia i dati" onclick="salva()"> </p>
    </form
    Ma mi salva solo gli ultimi valori, a me invece servirebbe tipo database, ogni volta che salvo i valori vengono salvati su una nuova riga...
     
  6. LorenzoPi

    LorenzoPi Utente Attivo

    Registrato:
    21 Gennaio 2014
    Messaggi:
    98
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    adesso ho capito cosa intendevi! ecco qua:
    HTML:
    <!DOCTYPE html>
    <html>
      <head>
        <script src="jquery.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
    
          //Carica i dati all'inizio in caso hai già salvato qualcosa!
    
          var storedData = localStorage.getItem('db');
    
          if(storedData)
          {
            // Otteniamo il database salvato
            var db = JSON.parse(localStorage.getItem('db'));
    
            // mostra i dati su una tabella all'interno del div#tuoDB
            var html = '<table><tr>';
            for(var p in db){
              html +='<td>'+p+'</td>';
            }
            html += '</tr>';
            // controllo la lunghezza di un'array con una qualsiasi proprieta dell'oggetto! in questo caso con nome
            for(var i = 0; i<db.nome.length; i++){
              html += '<tr>';
              for(var y in db){
                html += '<td>'+db[y][i]+'</td>';
              }
              html += '</tr>';
            }
            html += '</table>';
            $('#tuoDB').html(html);
    
          }
          else{
             $('#tuoDB').text('Database vuoto!');
          }
    
        });
    
        function salva(){
    
              var nome = $('[name="nome"]').val();
              var email = $('[name="email"]').val();
              var nota = $('[name="nota"]').val();
    
              var storedData = localStorage.getItem('db');
    
              if(storedData) //Verifica se ci sono dati presenti
              {
                // Otteniamo il database salvato
                var db = JSON.parse(localStorage.getItem('db'));
    
                db.nome.push(nome); // salva il nome nell'array
                db.email.push(email); // salva l'email nell'array
                db.nota.push(nota); // salva la nota nell'array
    
                // Salviamo l'intero database con i nuovi dati aggiunti
                localStorage.setItem('db',JSON.stringify(db));
    
                // mostra i dati su una tabella all'interno del div#tuoDB
                var html = '<table><tr>';
                for(var p in db){
                  html +='<td>'+p+'</td>';
                }
                html += '</tr>';
                // controllo la lunghezza di un'array con una qualsiasi proprieta dell'oggetto! in questo caso con nome
                for(var i = 0; i<db.nome.length; i++){
                  html += '<tr>';
                  for(var y in db){
                    html += '<td>'+db[y][i]+'</td>';
                  }
                  html += '</tr>';
                }
                html += '</table>';
                $('#tuoDB').html(html);
              }
              else{         // In caso non sono presenti dati allora creiamo un oggetto 'database' e lo inizializziamo quando salviamo per la prima volta
                var db = {
                  nome: [],
                  email: [],
                  nota: []
                }
                db.nome.push(nome); // salva il nome nell'array
                db.email.push(email); // salva l'email nell'array
                db.nota.push(nota); // salva la nota nell'array
    
                // Salviamo l'intero database
                localStorage.setItem('db',JSON.stringify(db));
    
                // mostra i dati su una tabella all'interno del div#tuoDB
                var html = '<table><tr>';
                var html = '<table><tr>';
                for(var p in db){
                  html +='<td>'+p+'</td>';
                }
                html += '</tr>';
    
                  html += '<tr>';
                  for(var y in db){
                    html += '<td>'+db[y][0]+'</td>';
                  }
                  html += '</tr>';
                html += '</table>';
                $('#tuoDB').html(html);
              }
    
            }
    
            function cancella(){
              // Cancella tutti i dati del tuo oggetto 'database'
              localStorage.clear('db');
              $('#tuoDB').text('Database vuoto!');
            }
        </script>
      </head>
      <body>
        <form>
            <p><label>Nome</label></p>
            <p><input name="nome" type="text" id="nome" /></p>
            <p><label>email</label></p>
            <p><input name="email" type="text" id="email" /></p>
            <p><label>Nota</label></p>
            <p><input name="nota" type="text" id="nota" /></p>
            <p><input type="button" value="Invia i dati" onclick="salva()"></p>
            <p><input type="button" value="Cancella tutti i dati" onclick="cancella()"></p>
            <div id="tuoDB"></div>
        </form>
      </body>
    </html>
    dovrebbe funzionare!! :)
     
  7. Bivio

    Bivio Utente Attivo

    Registrato:
    19 Maggio 2010
    Messaggi:
    91
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Ciao Lorenzo, grazie per la tua disponibilità, ho provato il tuo script, e funziona come volevo, adesso però se non ti chiedo troppo vorrei farti qualche domanda, in modo da capire e non fare un semplice copia e incolla :eek:

    1) Da quello che ho potuto capire db facendo sempre un paragone con un db relazionale, sarebbe il nome della tabella giusto?
    2) ho visto che crei un array per ogni campo ( nome: marco, franco, pippo ) non si potrebbe creare una cosa del tipo:
    id:1
    nome: marco
    email: marco@mail.it
    nota: test1

    3) Se tipo vorrei cancellare franco dai dati storage, come fare a eliminare anche gli altri dati (email, nota) associati a lui quando inseriti?

    Lo so che sono domande un po insolite, ma sono abituato a lavorare con php/mysql, adesso sto cercando di realizzare un app mobile con phonegap, e visto che il "sito" dovrà essere disponibile offline non posso utilizzare linguaggi lato server, ma solo client e qui mi trovo in difficoltà.
     
  8. LorenzoPi

    LorenzoPi Utente Attivo

    Registrato:
    21 Gennaio 2014
    Messaggi:
    98
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Ho riscritto un pò tutta l'applicazione e adesso è diventata tipo un semplice programma di gestione di database! (ovviamente non ci puoi fare le query sopra ahahha! xD).
    Comunque siccome è lungo lo script l'ho caricato su Mega.co.nz! ecco il link :).. è un semplice file .html.. fammi sapere come ti va! forse è anche troppo di quello che tu hai chiesto però mentre scrivevo mi è venuto in mente di fare così xD.. giusto per provare un pò e vedere cosa riuscivo a fare! :)
     
  9. LorenzoPi

    LorenzoPi Utente Attivo

    Registrato:
    21 Gennaio 2014
    Messaggi:
    98
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Scusa c'era un errore! L'ho ricaricato! ecco il link :)
     
  10. Bivio

    Bivio Utente Attivo

    Registrato:
    19 Maggio 2010
    Messaggi:
    91
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Ciao, questa settimana sono stato impegnato e solo oggi sono riuscito a testare il tuo script. Che dire hai fatto un lavoro pazzesco ;) c'è un po di tutto che posso studiarmi...Nel frattempo però avevo cercato anche io di fare qualcosa ed ecco il risultato:

    Codice:
    <!DOCTYPE html>
    <html>
      <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      	<script src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
    	$(document).ready(function() {
    		$("#form_1").submit(function(){
    			var newDate = new Date();
    			var Id_cliente = newDate.getTime();
    	
    			var dati_form = new Array();
    				 var nome = $('[name="nome"]').val();
    				 var email = $('[name="email"]').val();
    				 var nota = $('[name="nota"]').val();
         
    
    			dati_form.push(nome);
    			dati_form.push(email);
    			dati_form.push(nota);
    
    			if (nome == "" || email == "" || nota == "") {	
    				$("#divVuoto").dialog({
    					resizable: false,
    					height:140,
    					modal: true,
    					show: 'fold',
    					buttons: {
    						Ok: function() {
    							$(this).dialog('close');
    						}
    					}
    				});
    			} else {
    				try {
    					localStorage.setItem(Id_cliente, dati_form.join(';'));
    				} catch (e) {
    					if (e == QUOTA_EXCEEDED_ERR) {
    						alert('Quota dati storage superata!');
    					}
    				}
    
    			  
    			}
    		});
    	}
    });
        </script>
      </head>
      <body>
        <form id="form_1">
            <p><label>Nome</label></p>
            <p><input name="nome" type="text" id="nome" /></p>
            <p><label>email</label></p>
            <p><input name="email" type="text" id="email" /></p>
            <p><label>Nota</label></p>
            <p><input name="nota" type="text" id="nota" /></p>
            <p><input type="submit" value="salva"></p>
        </form>
        <div id="divVuoto"></div>
      </body>
    </html>
    LA differenza tra il mio e il tuo script che io creo un array singolo per ogni volta che salvo i dati, utilizzando il timestamp della data come id univoco, mentre tu crei un array "contenitore" con vari array. Come metodo secondo quale conviene utilizzare?
     
  11. LorenzoPi

    LorenzoPi Utente Attivo

    Registrato:
    21 Gennaio 2014
    Messaggi:
    98
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Secondo me è uguale :).. dipende come ti trovi meglio tu! io per esempio ho creato un oggetto con dentro 3 proprietà (nome,email,nota) e ogni volta che faccio il .push() sui vari array l'indice dell'array nome corrisponderà all'indice dell'array email e stessa cosa per l'array nota.. così la ricerca penso sia più veloce in quanto ti basta solo un indice per trovare tutti e 3 gli elementi.. Comunque penso alla fine sia uguale xD

    Comunque quella cosa che ho caricato l'ho fatta velocemente! nel senso che dovrebbe funzionare tutto però il codice si può migliorare! :).. se vuoi usa quello sennò usa il tuo :)
     
  12. Bivio

    Bivio Utente Attivo

    Registrato:
    19 Maggio 2010
    Messaggi:
    91
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Capito, visto che non ho mai utilizzato questo metodo sto riscontrando molte difficoltà, vorrei imparare, sapresti indicarmi qualche guida online o magari qualche libro?

    Ne approfitto per un altra domanda, se tipo ho salvato un valore con key = nome, come faccio a richiamare solo quel valore e visualizzarlo in una pagina html?

    Dimenticavo grazie mille per la disponibilità ;)
     
  13. LorenzoPi

    LorenzoPi Utente Attivo

    Registrato:
    21 Gennaio 2014
    Messaggi:
    98
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    allora per imparare javascript un libro online gratuito molto buono è Eloquent JavaScript ! lo puoi vedere online oppure scaricarti i file .html :).. tra un pò dovrebbe uscire anche la seconda edizione di questo libro però non so quando :).. in questa edizione però non parla di localStorage perché è appunto la prima edizione xD

    Comunque per riprendere il valore basta che fai localStorage.getItem('nome'); e ti restituisce il risulatato! però se è un array allora lo devi scorrere fino a quando non trovi quello che ti serve :)

    Prego :)
     
  14. Bivio

    Bivio Utente Attivo

    Registrato:
    19 Maggio 2010
    Messaggi:
    91
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    ok, ma come lo stampo in html per farlo visualizzare?
     
  15. Bivio

    Bivio Utente Attivo

    Registrato:
    19 Maggio 2010
    Messaggi:
    91
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Io ho provato cosi:

    Codice:
    document.getElementById("risultato").innerHTML=localStorage.getItem("nome");
    
    Ma se vorrei utilizzare jquery?
     
  16. LorenzoPi

    LorenzoPi Utente Attivo

    Registrato:
    21 Gennaio 2014
    Messaggi:
    98
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    con jquery semplicemente:
    Codice:
    $("#risultato").html(localStorage.getItem("nome"));
     
  17. glm2006ITALY

    glm2006ITALY Moderatore Membro dello Staff MOD

    Registrato:
    9 Aprile 2009
    Messaggi:
    1.249
    Mi Piace Ricevuti:
    9
    Punteggio:
    38
    Sesso:
    Maschio
    Occupazione:
    webmaster titolare della WebePc
    Località:
    Vercelli
    Home Page:
    Imho mi pare più un problema di programmazione che da sezione HTML :fonzie:
     
  18. LorenzoPi

    LorenzoPi Utente Attivo

    Registrato:
    21 Gennaio 2014
    Messaggi:
    98
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    ahah in effetti xD
     
  19. glm2006ITALY

    glm2006ITALY Moderatore Membro dello Staff MOD

    Registrato:
    9 Aprile 2009
    Messaggi:
    1.249
    Mi Piace Ricevuti:
    9
    Punteggio:
    38
    Sesso:
    Maschio
    Occupazione:
    webmaster titolare della WebePc
    Località:
    Vercelli
    Home Page:
    Sposto in Javascript :fonzie:
     
  20. Bivio

    Bivio Utente Attivo

    Registrato:
    19 Maggio 2010
    Messaggi:
    91
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Facendo varie prove, sto riuscendo ad andare avanti con il mio progetto... Ma adesso sono fermo, spero che la domanda per voi non sia troppo banale...In pratica ho creato questo script che salva i dati di una form in locale tramite localStorage, dopo salvati mi visualizzai il tutto con un tasto salva, una volta premuto questo tasto invio i dati al server che tramite php li elabora e li salva nel db mysql, il tutto tramite un chiamata ajax. Fin qui tutto ok, ora vorrei fare in modo che una volta che i dati sono salvati me li elimina da localStorage, e qui sorge i primo problema come mi ricavo la key di ogni singolo array? Posto il codice che sto provando...
    PS. per l'invio dei dati ho pensato di creare un singolo form non so se sia la soluzione ideale, ma se avete consigli sono bene accetti.

    Codice:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Home</title>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    <form id="logForm">
        	<label>Utente:</label>
        <input name="utente" type="text" id="utente"><br>
        	<label>Data servizio:</label>
            <input type="date" name="dt_servizio" id="dt_servizio"><br>
            <label>Turno:</label>
            <select name="turno" id="turno">
                <option value="0" selected>Seleziona</option>
                <option value="mattina">Mattina</option>
                <option value="pomeriggio">Pomeriggio</option>
                <option value="sera">Sera</option>
                <option value="notte">Notte</option>
            </select><br>
            <label>Nota:</label>
            <input name="nota" type="text" id="nota"><br>
            <input type="submit" value="Salva">
        </form>
        <!--<div id="ris_nome" class="box"></div>
        <div id="ris_email" class="box"></div>
        <div id="ris_note" class="box"></div>-->
        <ul id="listaDati">
        </ul>
        <div id="okk">
        </div>
    <!-- SCRIPT JS -->
    <script type="text/javascript">
    $(document).ready(function() {
    	visualizza()
    		$("#logForm").submit(function(){
    			var newDate = new Date();
    			var itemId = newDate.getTime();
    		
    			var values = new Array();
    			var utente = $("input[name='utente']").val();
    			var dt_servizio = $("input[name='dt_servizio']").val();
    			var turno = $("select[name='turno']").val();
    			var nota = $("input[name='nota']").val();
    	
    			values.push(utente);
    			values.push(dt_servizio);
    			values.push(turno);
    			values.push(nota);
    
    			if (utente == "" || dt_servizio == "" || turno == "" || nota == "") {
    				alert('Compilare tutti i campi');
    			} else {
    				try {
    					localStorage.setItem(itemId, values.join(';'));
    					//alert('Dati Salvati');
    					
    				} catch (e) {
    					if (e == QUOTA_EXCEEDED_ERR) {
    						alert('Quota localStorage superata!');
    					}
    				}
    				visualizza()
    			}
    		});
    });
    
    ////////////////////////////////////////////////////////////////////////////////////////////////
    function visualizza() {
       	var tuttiDati = "";
       	var i = 0;
    	var logLength = localStorage.length-1;
    	
        for (i = 0; i <= logLength; i++) {
    		var itemKey = localStorage.key(i);
    		//values sarebbe l'array che contiene tutti i dati
    		var values = localStorage.getItem(itemKey);
    		values = values.split(";");
    		var utente = values[0];
    		var dt_servizio = values[1];
    		var turno = values[2];
    		var nota = values[3];
    	
    		tuttiDati += '<li>'+ '<form action="#" method="post" id="dati_sincro">'
    		+ '<input name="id_key" type="text" readonly id="id_key" value="'+ itemKey +'">' + '  -  '  
    		+ '<input name="utente" type="text" readonly id="utente" value="'+ utente +'">' + '  -  '   
    		+ '<input name="dt_servizio" type="text" readonly id="dt_servizio" value="'+ dt_servizio +'">' + '  -  '
    		+ '<input name="turno" type="text" readonly id="turno" value="'+ turno +'">' + '  -  '
    		+ '<input name="nota" type="text" readonly id="nota" value="'+ nota +'">' + '  -  '
    		+ '<input type="button" id="bottone" value="Salva">'
    		+'</li>'+'</form>';
    		   	}
    
    	$("#listaDati").html(tuttiDati);
    }
    /////////////////////////
    $(document).ready(function() { 
    $("#bottone").click(function(){
     
    var dati = $("#dati_sincro").serialize(); 
      
    //invio
    $.ajax({
    type: "POST",
    url: "salva.php",
    data: dati,
    dataType: "html",
    success: function(msg)
    {
    $("#okk").html(msg);
    //////// NON REISCO A RECUPERARE "L'ID" UNIVOCO DI OGNI ARRAY////////////////
    var id = $(this).find("id_key").attr("idid_key");
    localStorage.removeItem("id");
    //localStorage.removeItem('itemKey'); 
    alert('eliminato');
    },
    error: function()
    {
    alert("Chiamata fallita, riprovare...");
    }
     
    });//ajax
     
    });//bottone click
    
    //// prova elimina
    		function elimina() {
    			var id = $(this).find("span").attr("id");
    			localStorage.removeItem("id"); 
    		}
    }); 
    </script>
    </body>
    </html>
    
     
Sto caricando...

Condividi questa Pagina