2

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.

Pavlo
  • 43,301
  • 14
  • 77
  • 113
Anoop
  • 418
  • 6
  • 19

1 Answers1

4

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.

Community
  • 1
  • 1
bcmcfc
  • 25,966
  • 29
  • 109
  • 181
  • Thanks @bcmcfc for your thoughts. Sorry if I am bit naive, but how and when are you suggesting to get the server version number ? Or is it something can we get on every server response ? – Anoop Dec 23 '13 at 11:55
  • Apologies, I don't think I took it all in when I first read your question. I was concentrating more on the caching side rather than the data changing side of things. You may need an AJAX call to get the version number in the first instance, or perhaps on every page load? It does depend somewhat on how often the data changes and what your business logic is for how it needs to be handled. – bcmcfc Dec 23 '13 at 11:59
  • Perhaps you could store a lastUpdate timestamp server side, which is requested periodically by the Angular app. If it's been updated more recently than the app's copy, wipe local storage and request the new data. – bcmcfc Dec 23 '13 at 12:02