Friday, December 13, 2013

HTML5 Local Storage Database - SOLVED!!

So as I was saying in my last post, I was stuck trying to figure out why my code to create a table in a html5 local storage database.
Well yesterday, I managed to work it out! It turns out it was pretty simple (of course, these things always turn out to be super simple and you feel stupid for being so stuck on it haha).
I based my code on this example I found here: http://www.redrobotzoo.com/posts/html5-local-storage-and-local-databases-tutorial/
I scoured google to find a straightforward example, which was so painful! Like this one, http://www.html5rocks.com/en/tutorials/webdatabase/todo/, is terrible. It says "Simple Todo List" so you think ooh yay! but gosh it was so difficult to understand what each part and variable was for!
And my biggest problem was that every time I copied the code and modified it to test it, the database would stop working.
Anyway, after hours of headache and re-starting, I managed to figure out what was what, thanks to redrobotzoo's detailed commenting and use of jquery for simplification.
But the problem I still had with redrobotzoo's code was that the database was being created but not the table. My code for "CREATE TABLE IF NOT EXISTS" wasn't creating a table!
Turns out, I just needed to put it all in one line where redrobotzoo concatenated the line for some reason.
eg:
This didn't work:
tx.executeSql('CREATE TABLE IF NOT EXISTS test ('
                           + 'personId INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,'
                           + 'personName VARCHAR(255),'
                           + ');',[],nullData,errorHandler);
But this did:
tx.executeSql('CREATE TABLE IF NOT EXISTS local_ranking(nameId INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,username VARCHAR(255))'
,[],nullData,errorHandler);

I am so happy now that it works! Now our app has a local ranking table :D

No comments:

Post a Comment