HTML5 and Browser Caching: Part 3

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.getItem(“myKey”)
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.