Facebook Twitter Gplus LinkedIn RSS
Home Local Database Opening the Database

Opening the Database

In order to utilize this Javascript client-side database, we will first need to set the database we want the user to have.  There are four parameters that need to be passed, as shown in the code below:

var shortName = 'myDatabase';
var version = '1.0';
var displayName = 'My Web App Database';
var maxSize = 5 * 1024 * 1024 //in bytes
var db = window.openDatabase(shortName, version, displayName, maxSize);

It’s best to set each parameter as a variable so that in case you need to change something later, such as when we introduce database versioning, you can modify the database you want your users to have at your own free will.  This also makes the database’s properties easier to track.  We call the openDatabase on the Javascript’s window object, passing in it four parameters, shortName, which is similar to a nickname for the database, version, which to no surprise, is the version of our database, displayName, referring to the more “official” name of our database, and then the maxsize, the size in bytes we want the database to be.  I like to set my maxSize variable by multiplying the number in megabytes by the 1024 two times to account for bytes and kilobytes.  Having the number multiplied out doesn’t really mean much when it comes to wanting to change the database size (what does 5,242,880 mean to you?).  The default Safari size is 5mb, but your browser will prompt you if you need to enlarge the database if the circumstance accounts for it. Also notice how we set the openDatabase function to the variable db, which we will see later on is a variable we need for database transactions.

If this isn’t your first time seeing a local database how-to page, you’ll probably notice that a lot of the examples out there use a try/catch function similar to this:

try {
if (!window.openDatabase) {
alert('not supported');
} else {
//open the database
} catch(e) {
if ( e == 2 ) {
alert('Invalid database version.');
} else {
//other errors
} //end

Although that code sort of works, I disagree with that method for several reasons. The first try statement is nice, telling you that your browser doesn’t support local database, or in the case of Firefox, the window.openDatabase function at all, but keep in mind that this entire guide is centered around the development of offline web apps for the iOS devices, which will automatically allow this syntax.  Secondly, the catch statement that is supposed to retrieve the error never worked for me, and I personally found what I consider a better approach to database opening and versioning than the catch error ’2′ method(or database mismatch error, not literally a version 2.0).

In addition and through my experience, I also believe that setting the five variables needed to open the database globally is more effective. This way you can access them in any other functions you wish to use, and especially in the case for my database versioning code.  People might say “avoid global variables if you can”, but there’s honestly no harm done in doing it here.  This is what I did:

//globally define these variables
//by not placing them in any functions

var shortName = 'myDatabase';
var version = '1.0'
var displayName = 'My Web App Database';
var maxSize = 5 * 1024 * 1024 //in bytes
var db;

Notice how I didn’t set the variable db to open the database yet.  You’ll see why in the database versioning page of this section.  If you’re itching to know, however, I’ll go ahead and tell you how it will coexist with opening the database.  The beginning of my database version check function opens the database as 1.0 defaulted if it is initially creating the database, and then will globally set an openDatabase call through

window['db'] = window.openDatabase(shortName, "", displayName, maxSize);

thus allowing us the ability to open any database version.  For simple apps, however, where you might not plan to change the database and it’s tables or columns at all, you can just globally define the openDatabase function like in the first block of code.

Since we now have an open database, let’s move on to how to communicate with this storage, using transactions to complete queries of adding, editing, or deleting our tables and data.  Next ->


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>