Passing parameters to sync data for the views in the past has always been done in the URL. This was a simple way to maintain a current state. As my application has grown, I've started to use Factory Services to pass data between controllers. Recently, I was turned on to AngularJS $Resource and $CacheFactory. (I can show code here if anyone is interested?)

Anyway, I'm questioning the concept in a mobile app of being able to press the "reload" button of the browser. The parameters in URL do a great job of maintaining the current state but on the page refresh the cache(s) are all blown away since the browser is basically starting over from scratch.

My design question is...
1) do I handle rebuilding the cache on the reload or
2) redirect the user back to the home page and let them navigate back to where they reloaded the page - in essence they will be rebuilding the cache or
3) create Local Storage which is a lot more work

Any suggestions would be welcome!

--hm--

$cacheFactory produces cache service instances and that's an in-memory cache as far as I know. A page reload will kill that cache. In a way cache is no different than storing data on a service instance - it all goes away. Cache is more of an internal feature meant to generically store previously calculated data to reuse later, but as you found out in many cases you can just use your services - since they are singletons - to do that for you.

Local Storage is stored in the browser's local storage on disk and it's persistent unless the user explicitly clears it. This is really what you want for more permanent storage. LocalStorage is pretty simple to use - it's something like 3 lines of code to store and to receive out of the cache.

To store:

$window.localStorage.setItem(key, val);

To retrieve:

$window.localStorage.getItem(key);

It doesn't get much easier than that. You might also have to check whether LS exists, but not much you can do about that really - if it's not there (or restricted by security policy) it just doesn't work.

+++ Rick ---

Thanks...

$window.localStorage.setItem(key, val);

$window.localStorage.getItem(key);

--hm--

The bigger issue is that LocalStorage has a size limit. It's around 5mb per site per spec minimum, but most browsers actually support more.

It's pretty useful to use cached data - for example in GeoCrumbs all data is locally cached. When you hit the site and you were there before you get your local data first until you explicitly sync, so it very rarely goes to the server for the actual geo entries.

+++ Rick ---

$window.localStorage.setItem(key, val);

$window.localStorage.getItem(key);