Salvare dati in locale e sincronizzarli...

  • Creatore Discussione Creatore Discussione Bivio
  • Data di inizio Data di inizio
B

Bivio

Utente Attivo
19 Mag 2010
91
0
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?
 
Bivio ha scritto:
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?
Clicca per allargare...

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'
 
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?
 
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:
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...
 
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!! :)
 
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 :o

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: [email protected]
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à.
 
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! :)
 
LorenzoPi ha scritto:
Scusa c'era un errore! L'ho ricaricato! ecco il link :)
Clicca per allargare...

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?
 
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 :)
 
LorenzoPi ha scritto:
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 :)
Clicca per allargare...

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à ;)
 
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 :)
 
LorenzoPi ha scritto:
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
ok adesso gli do un occhiata. Grazie

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 :)
Clicca per allargare...

ok, ma come lo stampo in html per farlo visualizzare?
 
Io ho provato cosi:

Codice: 
document.getElementById("risultato").innerHTML=localStorage.getItem("nome");

Ma se vorrei utilizzare jquery?
 
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>
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

L
[PHP] Salvare csv da form dati
Risposte
5
Visite
3K
PHP
luigi777
L
M
Salvare i dati nel db e aprire altra pagina php
Risposte
7
Visite
3K
PHP
Max61
M
S
[PHP] Salvare dati tabella in formato exel
Risposte
0
Visite
2K
PHP
samurai.sette
S
P
Salvare i dati restituiti dopo autenticazione OAuth2
Risposte
0
Visite
1K
Javascript
parsifal
P
C
Salvare dati form in un file di testo
Risposte
1
Visite
10K
PHP
controsenso
C
S
Salvare dei dati in una determinata tabella in base al select che l'utente seleziona
Risposte
8
Visite
3K
PHP
Altutto
A
G
salvare dati array
Risposte
7
Visite
2K
PHP
Longo8
Longo8
C
Salvare dati inviati tramite form in un array
Risposte
2
Visite
4K
PHP
c02y
C
P
Salvare dati da pagina web
Risposte
2
Visite
2K
.NET Framework
pfca
P
M
JavaScript: lanciare funzione ASP per salvare dati in database
Risposte
0
Visite
2K
Javascript
marcoa842
M
P
Salvare dati da un db
Risposte
2
Visite
1K
Classic ASP
Paolo69
Paolo69
neo996sps
[Visual Basic Express] Salvare i dati in un DB Access
Risposte
1
Visite
5K
Programmazione
francovb
F
M
Salvare i dati di un form su database...
Risposte
2
Visite
5K
HTML e CSS
Supercolore
S
I
salvare con ajax user_id name msg
Risposte
0
Visite
1K
PHP
Imperor
I
P
C# Salvare una colonna del DataGridView
Risposte
0
Visite
3K
XML
Pacifico
P
E
fpdf salvare e aprire il file
Risposte
4
Visite
2K
PHP
Emanuele85
E
I
salvare testo chat
Risposte
6
Visite
1K
PHP
Imperor
I
B
Selezionare un'immagine e salvare la selezione
Risposte
3
Visite
2K
Photoshop
WmbertSea
WmbertSea
Stex1967
Salvare una immagine che si trova su porta TCP 8080 di altro sito
Risposte
7
Visite
2K
PHP
Stex1967
Stex1967
L
salvare una immagine elaborata in canvas
Risposte
1
Visite
2K
Javascript
lanvoel39
L
Alto Basso