LocalStorage, several Ajax requests or huge Ajax request?

Question

I'm facing a really huge issue (at least for me). I'll give you some background.

I'm developing a mobile web app which will show information about bus stations and bike stations in my city. It will show GMap markers for both bus and bike stops and, if you click it, you will have info about the arrival time for the bus or how many bikes are available. I have that covered pretty nicely.

The problematic part is loading the stations.

My first approach was to load the whole amount of stations at page loading. It is about 200 Kb of JSON plus the time it gets to iterate through the array and put it in the map. They are hiddenly loaded so, when the users click on the line name, they appear using the 'findMarker' function. If other stations were present at the map, they get hidden to avoid having too many markers in the map.

This worked good with new mobiles such as iPhone 4 or brand new HTC but it doesn't perform good with 2 years old mobiles.

The second approach I thought, was to load them by request, so you click on the station, they are loaded to the map, and then shown but this leads to two problems:

• The first is that you may be (or may be not) perform several requests which may ends the same (?)
• The second one is that to avoid having so many markers, they should be hidden or deleted so you may be deleting info that should be needed again in a while, like bike stations that are loaded as a group and not by line.

Finally, I thought about using LocalStorage to store them, as they won't change that much but will be a huge amount of data and then, a pain in the ass to retrieve them as they are key-value, and also (and I'm not really sure about that) I could find devices with no support of this feature having to fallback to one of the other options.

So, that said, I thought that may be someone faced some similar problem and solved it in some way or have some tips for me :).

Any help would be really appreciated.

Answer 1

The best approach depends on the behaviour of your users. Do they typically click on a lot of stations or just a few? Do they prefer a faster startup (on-demand loading) or a more responsive station detail display (pre-loading data)?

An approach worth investigating would be to load the data by request but employ browser caching (ETag and Expires headers) to avoid retrieving the same information over and over again. This would solve both your concerns without dealing with LocalStorage.

See this this question for different approaches for browser caching ETag vs Header Expires