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.