Archive for February, 2011

HTML5 and Browser Caching: Part 3

February 17, 2011 1 comment

Part 3: Web Storage

In this final part we cover HTML5 Web Storage which is essentially key/value pairs.

You add data into the store using the key, which is a String, and then retrieve the data by using the same string. The data stored in the value field can be any object supported by Javascript but is actually stored in String format.

Good Bits

  • Simple to Use: There’s a variety of ways to access the key/value store, you can use:

localStorage.setItem(“myKey”, myObj)

functions or use square bracket notation:

var myObj = localStorage[“myKey”]
localStorage[“myKey”] = myObj

This makes it easy to pick up and use for simple tasks.

  • Event Support: In order to keep track of changes to the store, you can make use of the storage event.  This is fired on the window when ever the setItem(), removeItem(), or clear() functions are called and the result is the store is changed. If these functions don’t change the store no event is fired. This can help with tasks such as logging.
  • Browser Support: Web Storage is supported by most widely used desktop and mobile browsers (with the exception of Opera mini/mobile).  See the supported list.

Bad Bits

  • Storing Strings: When using Web Storage you’re storing strings, not data in its original format. In the case that you want to store a lot of integers or floats, the difference in representation can really add up. Each digit in that integer is being stored as a character, not in the usual representation of an int. This naturally means the same data can take up a lot more space.
  • Fixed Size Storage: The standard storage size provided by most browsers is 5MB. Unlike Web SQL Database if you need more space you can’t request more.  Instead if you exceed the limit a QUOTA_EXCEEDED_ERR is thrown. Some browsers (including Opera) allow the user to configure the amount of storage space provided within their settings, however this is not something that the developer has any control over so can’t practically be made use of.

HTML5 and Browser Caching: Part 2

February 17, 2011 4 comments

Part 2: Web SQL Database

Web SQL Database is essentially a local implementation of SQLLite inside your browser. It can be queried using SQL, and offers a lot more functionality than the simple key-value store that Web Storage provides.  There also seems to be a difference in the way browsers handle it.

Good Bits

  • Transactions & Queries: Being a database you can setup a schema, and query the data easily.  Web SQL also supports transactions, meaning that you can setup tranactions that contain one or more SQL statements. You are then able to rollback the transaction if any of the statements fails (either the SQL or the code in the transaction), so any changes are never committed.
  • Variable Size: The default size for the database in most browsers is 5MB.  However when you setup the database (and also it seems when extra items are stored) you can request extra space. This usually prompts the user with a dialogue box asking if they want to allow this.  This is an advantage over for example using Web Storage as it means that it is often possible to store more than 5MB of data.

Bad Bits

  • Browser Support: The API for Web SQL Database is not supported by most desktop browsers (including FireFox and IE)  See a useful list.  Also they do not plan to introduce support.  This is because the specification is no longer being maintained and it looks likely that the IndexedDB standard will take it’s place in future versions, and will be far more widely supported.   IndexedDB isn’t currently any supported for this generation of browsers so is not practical to develop for at the moment. For this reason we have chosen to use Web SQL in our mobile application, with a view to replacing this code with the IndexedDB API once this is widely supported.
  • Versioning: The implementation of versioning seems a bit odd. You need to know the database version number before you are able to connect to an already existing database, however without being able to connect to a users database you can’t find out what version they are using.  This obviously makes things a little difficult when you are trying to upgrade to a newer version, with a different schema.

Using Web SQL Database:

If you are interested in getting your feet wet there’s a great article on how to use Web SQL Database at HTML5 Doctor .  It covers creating and connecting to a database, querying and dealing with the results, and also has some nice demos.