Home > Mobile Web Development > HTML5 and Browser Caching: Part 3

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.
Advertisements
  1. No comments yet.
  1. February 22, 2011 at 9:54 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: