How to set "cache dependency" to local storage

Question

We are using local storage module from angularjs.

https://github.com/grevory/angular-local-storage

Now can anybody suggest how we can set a cache dependency at client side, so that when data changes in the server the local storage is invalidated(forcing to fetch data afresh from server).

Right now in test environment, we had to ask the testers to clear browser cache each time there is a release. Cant move with this approach in production.

Thanks for helping.

Answer 1

Setup a version number in your app, and store it in the local storage when the user visits.

When the app is initialised, compare the local storage version with the App.version.

If it's different, clear local storage and re-render, reload, re-initialise or whatever you need to do for your app.

To handle the situation where a user has used your app before you implemented this behaviour, simply ensure it also clears local storage if it cannot find a version key in local storage to begin with.

---

Just a couple of further notes, relating to the comments.

I've had issues in the past with local storage due to different things happening. Part 3 goes beyond the scope of the question but is worth mentioning for completeness.

1. A new release: the application source code has changed, and the data it's storing is structured differently. Perhaps it's now JSON.stringified, for example. Or perhaps we were expecting a string and now we get an integer, which might break something with strict type checking.

   This is solved using the approach described above. The app has changed, so the app has a new version, and it knows it cannot trust the data retrieved from local storage for a different version.

2. The problem you describe: the data on the server has been updated and the app's locally stored copy is out of date.

   How do we tell the app that things have changed? Periodically request some token from the server, perhaps a timestamp, that we can compare to see if there was a change since we last accessed the data. This question talks about a number of different ways to do this.

3. The JavaScript itself has changed: we have a minified production build and now there is a new one, but the user still has the old build cached. This is a problem when the server is expecting different requests to what it will now receive from the new build.

   The simple solution here is to tack a version number of some kind onto the end of the resource URL, so that the browser requests application.min.js?v=2 instead of application.min.js?v=1.