HTML 5 - Client side storage

[@l3b]

Mi hanno fatto notare che avevo sbagliato sezione del forum prima, mi scuso per il doppio post.


Ciao a tutti, ho un problema con un'applicazione di esempio che sto sviluppando in html 5.
In particolare riesco a scrivere i dati all'interno del database locale ma non riesco poi a recuperarli per visualizzarli nella pagina web. Qualcuno mi può aiutare? Allego il codice javascript..

<script language="JavaScript">
var systemDB;
var prod;

function init(){
stato();
initDB();
var txt=window.sessionStorage.getItem("tesi_prod");
alert(txt);
if ((txt!="")){
printProd(txt);
}
}

function initDB(){
try{
if (!window.openDatabase){
alert("client side storage not supported");
}
else {
window.sessionStorage.setItem("tesi","1");
var name='mydb';
var version='1.0';
var displayName='Database Prodotti';
var maxSize=65536;
var myDB=openDatabase(name,version,displayName,maxSize );
createTable(myDB);
insertProd();
}
}catch (e){
if (e==INVALID_STATE_ERR){
alert('Versione del database incorretta');
}
else {
alert('Errore numero '+e+'.');
}
}
systemDB=myDB;
}

function stato(){
if (navigator.onLine){
var newcontent = document.createElement('p');
newcontent.id = 'status-content';
newcontent.appendChild(document.createTextNode('AP PLICAZIONE ONLINE.'));

var scr = document.getElementById('status');
scr.parentNode.insertBefore(newcontent, scr);

}
else{
var newcontent = document.createElement('p');
newcontent.id = 'status-content';
newcontent.appendChild(document.createTextNode('AP PLICAZIONE OFFLINE.'));

var scr = document.getElementById('status');
scr.parentNode.insertBefore(newcontent, scr);
}
}

function createTable(myDB){
myDB.transaction(
function(transaction){
transaction.executeSql('DROP TABLE prodotto;');
}
);
myDB.transaction(
function(transaction){
transaction.executeSql('CREATE TABLE prodotto(codice INTEGER NOT NULL PRIMARY KEY, nome TEXT NOT NULL, caratteristiche TEXT NOT NULL, descrizione TEXT NOT NULL, prezzo INTEGER NOT NULL);',[],nullDataHandler,errorHandler);
}
);
}


function insertProd(myDB){
var myDB=systemDB;
myDB.transaction(
function(transaction){
cod=1;
nome="7210";
carat="gprs,sms,vga photo,mp3";
desc="cellulare";
price=99;
transaction.executeSql('INSERT INTO prodotto (codice,nome,caratteristiche,descrizione,prezzo) VALUES (?,?,?,?,?);',[cod,nome,carat,desc,price],nullDataHandler,errorHandler);
cod=2;
nome="n70";
carat="umts,sms,email, 2mp,mp3";
desc="smartphone";
price=299;
transaction.executeSql('INSERT INTO prodotto (codice,nome,caratteristiche,descrizione,prezzo) VALUES (?,?,?,?,?);',[cod,nome,carat,desc,price],nullDataHandler,errorHandler);
cod=3;
nome="omnia";
carat="umts,sms,email,5mp,win mobile,mp3";
desc="pocketpc";
price=499;
transaction.executeSql('INSERT INTO prodotto (codice,nome,caratteristiche,descrizione,prezzo) VALUES (?,?,?,?,?);',[cod,nome,carat,desc,price],nullDataHandler,errorHandler);
}
);


}

function setProd(form){
if(form.rad[0].checked){
alert('cellulare');
window.sessionStorage.setItem('tesi_prod','cellula re');
printProd('cellulare');
return;
}
if(form.rad[1].checked){
alert('smartphone');
window.sessionStorage.setItem('tesi_prod','smartph one');
printProd('smartphone');
return;
}
if(form.rad[2].checked){
alert('pocketPC');
window.sessionStorage.setItem('tesi_prod','pocketP C');
printProd('pocketPC');
return;
}
alert('Nessun prodotto selezionato');
}

function printProd(text){
var mydb=systemDB;
var txt=text;
mydb.transaction(
function(transaction){
transaction.executeSql("SELECT codice,nome,caratteristiche,prezzo FROM prodotto WHERE descrizione=? ;",[txt], printCommit,errorHandler2);
}
);
}

function printCommit(transaction,results){
var row;
var stringa="";
alert(results.rows.length);
for (var i=0;i<=results.rows.length;i++){
row=results.rows.item(i);
stringa = stringa + row['codice']+'\t'+row['nome']+'\t'+row['caratteristiche']+'\t'+row['prezzo']+'\n';
}
var newcontent = document.createElement('p');
newcontent.id = 'product-content';
newcontent.appendChild(document.createTextNode(str inga));

var scr = document.getElementById('product');
scr.parentNode.insertBefore(newcontent, scr);

}

function errorHandler(transaction,error){alert(error.code); }

function errorHandler2(transaction,error){alert(error.code+ "errore printProd");}

function nullDataHandler(transaction,results){}



</script>




Grazie mille!!!!!

[andr3a]

alert(results.rows.length);

ti restituisce qualcosa? se entri nella printCommit la select è ok, devi vedere se i dati sono presenti però. In pratica essendo tutto asincrono non puoi essere certo che quando cerchi è dopo aver inserito.

Se devi fare un INSERT, la SELECT che dovrebbe considerare quell'insert dovrebbe stare nella callback dell'insert, creando un'altra callback, e mostrando i risultati.

openDatabase ad eccezione di Google Gears lavora tutto asincrono (il che complica la vita per chi non ha idea di come gestire multiple interazioni in modo ordinato).

P.S. magari dai una letta a questo articolo, se non l'hai già fatto.

[@l3b]

Non sapevo che openDatabase lavorasse in modo asincrono in Safari..ora provo a guardare...

In ogni caso se io elimino le insert (il database una volta creato rimane sempre disponibile finchè l'utente non lo elimina manualmente) pertanto la chiamata a printProd dove la dovrei mettere?

Grazie mille!!

[andr3a]

Originariamente inviato da @l3b
Non sapevo che openDatabase lavorasse in modo asincrono in Safari

non è safari, sono le specs HTML5 che dicono di rilasciare immediatamente il flusso di esecuzione alla chiamata transaction, di qui il motivo di una callback, quando c'è una callback da utilizzare al 99% si tratta di flusso asincrono.

Il fatto che abbiano scelto qusta stada è semplice e sensato. Operazioni in DB possono essere molto "costose" e se fai una join da milioni di risultati la tua pagina potrebbe risultare inutilizzabile fino alla fine del processo (magari 2 soli campi che sono il risutlato di milioni di operazioni in query)

Questo è il motivo per cui Google ha implementato il WorkerPool il quale lavora in multi thread, ovvero non blocca la pagina, fa quello che deve fare, si riallaccia alla pagina quando tutto è finito e in tutti i PC moderni il risultato sarà trasparente per prestazioni o altro ... l'utente non deve aspettare che l'esecuzione sia terminata (stesso motivo per il quale Ajax è usato asincrono, se carichi 1 mega di dati ad esempio non puoi fare niente fino a dati caricati)

Originariamente inviato da @l3b
In ogni caso se io elimino le insert (il database una volta creato rimane sempre disponibile finchè l'utente non lo elimina manualmente) pertanto la chiamata a printProd dove la dovrei mettere?

il database lo crei se non c'è ma se c'è ti ci devi connettere comunque.
Unica cosa che devi fare è usare una query differente.

myDB.transaction(
function(transaction){
transaction.executeSql('CREATE TABLE IF NOT EXISTS prodotto(codice INTEGER NOT NULL PRIMARY KEY, nome TEXT NOT NULL, caratteristiche TEXT NOT NULL, descrizione TEXT NOT NULL, prezzo INTEGER NOT NULL);',[],nullDataHandler,errorHandler);
}
);

al posto del nullDataHandler, esendo questa query la principale qualunque altra cosa dovrebbe essere attivata dopo l'esecuzione di questa query o rischi di operare su una tabella inesistente.

Non credo sia un forum il posto adeguato per capire gestioni multi thread ed asincrone, ti consiglio qualche articolo o guida sull'argomento poichè sebbene tutti abbiano Ajax in bocca, pochi sono in grado di gestire flussi dati e interazioni asincrone con eventi nel mezzo.

Soluzione semplice: us sistema di queue che ti permette di aggiungere cose da fare senza problemi e delegare la gestione dell'ordine chiamate. Ancora, più di questo non posso dirti ma spero di averti dato qualche aiuto.

[@l3b]

Devo dire che mi hai dato numerosi spunti per approfondire l'argomento.
Ti ringrazio davvero molto!!!