Updating my CanIUse Mashup with LocalStorage

This post is more than 2 years old.

Last week I blogged a mashup I built. It took CanIUse.com data and allowed you to select multiple features at once to see how well - at an aggregate - browsers supported those features. This mashup was possible because CanIUse.com shares their data as a JSON file. This file is a good 200K big. That's a sizable chunk of data to load on every request. I thought it might be cool to update the code to make use of LocalStorage to keep a copy of the data on the user's browser.

Storing the data in LocalStorage would be trivial. What wouldn't be trivial is figuring out an easy way to know when the local copy should be thrown away and overwritten with newer data on the server. I thought of two basic ways of doing this.

First - I could do a HTTP HEAD request to the file and check the last modified value on the file. This would mean - at most - two HTTP calls to the server. At minimum, there would always be one. I talked about this method in a post earlier this year (Using jQuery to Conditionally Load Requests). I knew that would work, but I wanted to try something new, and something simpler.

I decided on a simple 'version' variable. I'd associate the data with this version number. Here's the modification:

The version value is hard coded, which means when I push up a new data file I need to edit the code. That's kinda meh, but it's also pretty quick to edit. Take a look at that conditional. It does many things at once:

  • First, see if the client supports LocalStorage.
  • See if they have a stored copy of the data
  • See if they have a stored copy of the version value
  • Compare the version to the current version. Note! I had to use the double equality comparator instead of the triple equality. Why? The triple equality comparator is strict. LocalStorage values are stored as strings. My currentVersion value is a number. By using the double equality comparator it handle the conversion ok. (I could have just used a string value for currentVersion, but this way, in case I forget, it won't screw up.)

Overall - this was about 5 minutes of code - but the update should be worth it. Other resources on the page, like jQuery and Handlebars, also add up to 200k, so I pretty much cut the download time in half. As an example, here's Chrome Dev Tools showing the load and its impact on the request.

What's next? I'd like to update the demos to dynamically change the URL so that folks could bookmark various configurations. So for example, selecting feature A, B, and D, should create a URL you could send to someone else.

For your enjoyment - the two demos: Demo 1 Demo 2

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Geoff posted on 9/13/2012 at 4:11 PM

Hi Ray

Any reason you're not using a CDN copy of jquery (from Google for example?)

Your jquery version is being delivered from your own server which looks like it doesn't support compression.

Might save you a few cents in hosting, and your visitors would get a gzipped version if they support it, and be more likely to have it in their cache already.

Comment 2 by Raymond Camden posted on 9/13/2012 at 5:42 PM

No particular reason. I go back and forth depending on if I'm working at an airport w/o wifi. ;)