Salvare dati in locale e sincronizzarli...

LorenzoPi · 9 Feb 2014

Per eliminare TUTTI i valori dal localStorage usa:

Codice:

localStorage.clear();

mentre per eliminare solo i valori di una certa key allora:

Codice:

localStorage.removeItem(key)

Comunque bastava che facevi una ricerca su internet e trovavi subito questa risposta!

Bivio · 9 Feb 2014

LorenzoPi ha scritto:
Per eliminare TUTTI i valori dal localStorage usa:

Codice:

localStorage.clear();

mentre per eliminare solo i valori di una certa key allora:

Codice:

localStorage.removeItem(key)

Comunque bastava che facevi una ricerca su internet e trovavi subito questa risposta!

Forse mi sono espresso male (se vedi nello script che ho postato, ho già quella funzione come commento), io voglio che la key da eliminare sia dinamica, nel senso che deve essere automatica. Quando premo sul pulsante salva dopo che la query mysql sia andata a buon fine me la elimina...

LorenzoPi · 9 Feb 2014

prova a cambiarequesto:

Codice:

var id = $(this).find("id_key").attr("idid_key");
localStorage.removeItem("id");

con:

Codice:

var id = $(this).find("id_key").val();
localStorage.removeItem(id);

Bivio · 9 Feb 2014

Niente non va...

LorenzoPi · 9 Feb 2014

allora io ho capito che tu quando inserisci i dati nel form le invii alla pagina php e se tutto va bene ti deve cancellare i dati.
Allora se ogni volta che invii i dati (cioè un intero "record" per volta) te li deve eliminare allora puoi usare direttamente localStorage.clear(); che ti cancella tutto direttamente!

Bivio · 9 Feb 2014

LorenzoPi ha scritto:
allora io ho capito che tu quando inserisci i dati nel form le invii alla pagina php e se tutto va bene ti deve cancellare i dati.
Allora se ogni volta che invii i dati (cioè un intero "record" per volta) te li deve eliminare allora puoi usare direttamente localStorage.clear(); che ti cancella tutto direttamente!

Se vai qui http://geks.altervista.org/app/ e lo provi forse ti sarà più chiaro. Ogni volta che si salva una forma si genera nel locaStorage una cosa del genere:

1391958290411 - Nome - 09/02/2014 - Sera - Nota 1
1391958290411 - Pippo - 09/02/2014 - mattina - Nota 2
1391958290411 - Franco - 09/02/2014 - pomeriggio - Nota 3

Io voglio salva gli array singolarmente, quindi quando premo salva della prima riga, mi salva quella riga e quando termino il tutto dovrebbe fare una cosa del genere localStorage.removeItem(1391958290411) eliminando quindi la prima riga e dando la possibilità di salvare le altre...

L'idea di eliminare tutto non va bene visto che ho la necessità di salvare altri dati che non devono essere eliminati...

LorenzoPi · 9 Feb 2014

aaah ok! allora uno dei problemi è che ogni volta che salvi un 'record' la funzione visualizza() ti genera dell'html con elementi che hanno lo stesso id! Ricorda che ogni id deve essere unico in tutta la pagina!
Inoltre alla fine di $("#logForm").submit(function ecc.. ); ho aggiunto return false; perché sennò ogni volta che salvavi il nuovo 'record' ti si ricaricava la pagina mentre adesso non lo fa più!
Comunque ho fatto altre modifiche e adesso dovrebbe funzionare!
ecco qua tutto il codice:

HTML:

<!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()
			}

			// Aggiunto return false; per non far aggiorare la pagina una volta salvato il nuovo 'record'
			return false;
		});
});

////////////////////////////////////////////////////////////////////////////////////////////////
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];

		// Al posto di 'id' come attributo ho messo 'class' perché senno andava in conflitto con 
		// le altre righe che generavi dopo!
		// Inoltre ho aggiunto l'attributo onclick sul bottone per eliminare il 'record' perché sennò
		// quando andava a creare la nuova riga, la funzione $('.bottone').click( ecc... ) non veniva riconosciuta
		// in quanto viene generata dopo che la pagina è stata caricata! infatti $(document).ready(function(){ ecc.. });
		// l'ho tolto in quanto dopo il bottone non veniva più riconosciuto/trovato e l'evento del click non veniva eseguito!
		tuttiDati += '<li>'+ '<form action="#" method="post" class="dati_sincro">'
		+ '<input name="id_key" type="text" readonly class="id_key" value="'+ itemKey +'">' + '  -  '  
		+ '<input name="utente" type="text" readonly class="utente" value="'+ utente +'">' + '  -  '   
		+ '<input name="dt_servizio" type="text" readonly class="dt_servizio" value="'+ dt_servizio +'">' + '  -  '
		+ '<input name="turno" type="text" readonly class="turno" value="'+ turno +'">' + '  -  '
		+ '<input name="nota" type="text" readonly class="nota" value="'+ nota +'">' + '  -  '
		+ '<input type="button" class="bottone" value="Salva" onclick="elimina(this)">'
		+'</li>'+'</form>';
	}

	$("#listaDati").html(tuttiDati);
}
function elimina(elemento){

	var dati = $(elemento).parent(".dati_sincro").serialize(); 
  
	//invio
	$.ajax({
	type: "POST",
	url: "salva.php",
	data: dati,
	dataType: "html",
	success: function(msg)
	{
		$("#okk").html(msg);
		
		// Qua prendo l'id del 'record'.
		var id = $(elemento).siblings(".id_key").val();
		localStorage.removeItem(id);
		// richiamo la funzione per 'aggiornare' l'html della pagina
		visualizza();

		alert('eliminato');
	},
	error: function()
	{
		alert("Chiamata fallita, riprovare...");
	}
	 
	});//ajax
	
}

</script>
</body>
</html>

Salvare dati in locale e sincronizzarli...

LorenzoPi

Utente Attivo

Bivio

Utente Attivo

LorenzoPi

Utente Attivo

Bivio

Utente Attivo

LorenzoPi

Utente Attivo

Bivio

Utente Attivo

LorenzoPi

Utente Attivo

Discussioni simili

Salvare dati in locale e sincronizzarli...

LorenzoPi

Utente Attivo

Bivio

Utente Attivo

LorenzoPi

Utente Attivo

Bivio

Utente Attivo

LorenzoPi

Utente Attivo

Bivio

Utente Attivo

LorenzoPi

Utente Attivo

Discussioni simili

Privacy & Transparency

Privacy & Transparency