HTML and CSS Reference
In-Depth Information
In the previous example, you only use the SQL parameter. Of
course if the statement to create a table runs and our table
already exists there's actually an error being triggered, but since
you're not catching it and it doesn't affect our program fl ow, in
this instance you don't care.
However, the next step of this application is to load the data-
base with tweets from Twitter, and this has to happen once the
table is in place (because of the asynchronous nature of the
Web SQL Database API), you'll have to get the tweets in the
complete callback. Herein lies a problem: If the table exists, the
transaction will fail and won't trigger the success callback. The
code will run fi ne the fi rst time around, but not the second. So
to get around this, you'll say to only create the table if the table
doesn't exist; this way the success callback fi res if the table is
created and if the table already exists, and the error callback is
only called if there's some other problem.
var db;
if (window.openDatabase) {
db = openDatabase('tweetdb', '1.0', 'All my tweets',
¬
2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS tweets
¬
(id, date, tweet)', [], function () {
// now go and load the table up with tweets
});
});
}
Inserting and querying
Now let's say you hit Twitter for a search query for all the men-
tions of HTML5, you store all those tweets in your database,
then you allow the user to select the time range of tweets from
the past 5 minutes, 30 minutes, 2 hours, and then all time. The
time range selection will be radio buttons with click handlers,
and you'll run your query to show only the tweets from that
time range.
The crux of this application is split between storing the tweets
in your database and showing the tweets depending on the
time range.
Before any of your code runs, fi rst you must create the database
and tweets table, which will include a date column whose type
