Salvare dati in locale e sincronizzarli...

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?
 

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
0
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?

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'
 

Bivio

Utente Attivo
19 Mag 2010
91
0
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?
 

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
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:

Bivio

Utente Attivo
19 Mag 2010
91
0
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...
 

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
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!! :)
 

Bivio

Utente Attivo
19 Mag 2010
91
0
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: [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à.
 

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
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! :)
 

Bivio

Utente Attivo
19 Mag 2010
91
0
6
Scusa c'era un errore! L'ho ricaricato! ecco il link :)

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?
 

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
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 :)
 

Bivio

Utente Attivo
19 Mag 2010
91
0
6
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 :)

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à ;)
 

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
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 :)
 

Bivio

Utente Attivo
19 Mag 2010
91
0
6
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 :)

ok, ma come lo stampo in html per farlo visualizzare?
 

Bivio

Utente Attivo
19 Mag 2010
91
0
6
Io ho provato cosi:

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

Ma se vorrei utilizzare jquery?
 

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
0
con jquery semplicemente:
Codice:
$("#risultato").html(localStorage.getItem("nome"));
 

Bivio

Utente Attivo
19 Mag 2010
91
0
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>
 
Discussioni simili
Autore Titolo Forum Risposte Data
L [PHP] Salvare csv da form dati PHP 5
M Salvare i dati nel db e aprire altra pagina php PHP 7
S [PHP] Salvare dati tabella in formato exel PHP 0
P Salvare i dati restituiti dopo autenticazione OAuth2 Javascript 0
C Salvare dati form in un file di testo PHP 1
S Salvare dei dati in una determinata tabella in base al select che l'utente seleziona PHP 8
G salvare dati array PHP 7
C Salvare dati inviati tramite form in un array PHP 2
P Salvare dati da pagina web .NET Framework 2
M JavaScript: lanciare funzione ASP per salvare dati in database Javascript 0
P Salvare dati da un db Classic ASP 2
neo996sps [Visual Basic Express] Salvare i dati in un DB Access Programmazione 1
M Salvare i dati di un form su database... HTML e CSS 2
P C# Salvare una colonna del DataGridView XML 0
E fpdf salvare e aprire il file PHP 4
I salvare testo chat PHP 4
B Selezionare un'immagine e salvare la selezione Photoshop 3
Stex1967 Salvare una immagine che si trova su porta TCP 8080 di altro sito PHP 7
L salvare una immagine elaborata in canvas Javascript 1
L salvare una immagine elaborata in canvas Javascript 1
E Salvare immagini PHP 0
L salvare codice html in mysql PHP 3
L salvare somma con sottrazione PHP 1
M Salvare coordinate Maps nel DB PHP 2
D SALVARE "MASCHERA" + "ALLEGATO PDF" IN UN UNICO PDF MS Access 0
A Twitter aggiungere tweet a campagna esistente o salvare pubblico Social Media Marketing 0
D Salvare in diversi campi mysql con diversi ID PHP 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
M Salvare JSONObject in Shared Preference Sviluppo app per Android 0
M [PHP] Salvare campo di una tabella in una variabile PHP 14
S [ASP] SALVARE VALORE SELECT OPTION SU CAMPO TABELLA ACCESS Classic ASP 9
M [PHP] FPDF Salvare su disco C locale Windows PHP 3
C Photoshop CS 6 salvare una modifica Photoshop 0
A Salvare immagine ridimensionata in MySql con GD PHP 12
G php salvare file in campo blob mysql: massimo 4MB PHP 1
M Salvare pagine web come segnalibro con istruzioni javascript Javascript 0
L Salvare posizione maps Sviluppo app per Android 0
G [PHP] SALVARE RECORD ESTRATTI DA DATABASE PHP 6
D Come salvare scelta della select "dinamica" ajax-php? Come dato php o attributo value tag option? Ajax 5
P [SOLVED] salvare il TCPDF output in mysql e rivisualizzarlo PHP 3
M Form ASP su MsSQL salvare 2 campi in 1 Classic ASP 4
V [PHP] Salvare campo radio in db e leggerlo PHP 15
Benix89 Come salvare radio button selezionato Magento 1
Benix89 Salvare radio button selezionato PHP 2
P Come salvare il proprio diario di fb Discussioni Varie 0
M Salvare in tabella link file importato PHP 1
F Cliccare e salvare src immagine HTML e CSS 2
M Cartella predefinita dove salvare i backup PHP 0
P dove si va a salvare il dbase phpmyadm una volta creato ???? Database 0
P dove si va a salvare il dbase phpmyadm una volta creato ???? Database 7

Discussioni simili