HTML5 and CSS3, Second Edition

(singke) #1
request.onsuccess=function(event){
$("#notes").empty();
};

request.onerror=function(event){
alert("Unableto clearthingsout.");
}
};

With that last change, our notes application is complete. To kick everything
off, we call the connectToDB() method and load the records from our database.
We also need to call the newForm() method so that the form is ready to be used.
This way, the Delete button is hidden too.

html5_indexedDB/javascripts/notes.js
connectToDB();
newNote();

That’s all there is to it. We have to be careful with this app, though. Since
the data is all stored on the client, it could be easily erased if the user clears
out his cache and his local data stores, just like with cookies. It also doesn’t
follow the user from computer to computer. To solve those problems, we’d
need to build in a mechanism to synchronize this data with a server, and
that’s beyond the scope of this book.

Our application works on Internet Explorer 10 and desktop machines running
Chrome and Firefox. However, Safari, the mobile Android browsers, and Safari
on iOS don’t support IndexedDB. They support the deprecated (but widely
used) Web SQL Databases standard instead. Internet Explorer 8 and 9 don’t
support either Web SQL Databases or IndexedDB. Let’s look at how we handle
these situations.

Falling Back


The simplest solution would be to convince users of an app like this to upgrade
their browsers to something that supports IndexedDB, like Internet Explorer
10, or, if that’s not possible because of operating-system limitations, the latest
version of Chrome. That’s not an unheard-of practice, especially if using an
alternative browser allows you to build an internal application.

Of course, we’re developers and we don’t always get to make those calls. But
we can use IndexedDBShim to make our app work in browsers that support
the Web SQL Databases specification,^6 meaning we can easily make this notes
app work on mobile devices like iPhones, iPads, and Android tablets, since


  1. http://nparashuram.com/IndexedDBShim/


report erratum • discuss

Storing Data in a Client-Side Database Using IndexedDB • 201


Download from Wow! eBook <www.wowebook.com>

Free download pdf