60

I have a problem of storing a lot of client-side data, and I can't decide which way is better. Now I'm using AngularJS's cacheFactory, it works fine, but all data reloads with a new session. Is it worth to use local storage instead?

7
  • Hello you can use webstorage then you can fetch data with a factory, w3schools.com/html/html5_webstorage.asp Oct 10, 2013 at 19:26
  • 1
    I ended up going with github.com/gsklee/ngStorage The Angular-way: No Getter 'n' Setter Bullshit!
    – mb21
    May 13, 2014 at 10:39
  • 1
    Its worth noting that local storage is not secure
    – Blowsie
    Nov 6, 2014 at 15:25
  • 1
    @mb21 ngStorage is dead, with outstanding crucial PR's
    – Blowsie
    Nov 10, 2014 at 11:49
  • 1
    @Rodney it has no activity and critical issues.
    – Blowsie
    Mar 31, 2015 at 13:40

4 Answers 4

84

If your goal is to store client-side and persistent data, you can't use the $cacheFactory, which just caches the data for the current session.

One solution is to use the new local storage API. This awesome Angular module makes all the dirty job for you, and even falls back to cookies for old browsers!

7
  • 1
    No, you should serialize your objects before to store them (and unserialize to read them), typically in JSON. But to store objects directly doesn't make a lot of sens, since all persistent storage is mandatory using files, and so linearized data.
    – Blackhole
    Oct 11, 2013 at 20:27
  • 2
    Vote up for the local storage module mention. Saved me a lot of coding!
    – masimplo
    Dec 27, 2013 at 8:58
  • 21
    @Rasalom I'm late to the party, but I looked at the source of the localstorage module and it does store objects without the need for you to json encode/decode them yourself (it does it for you). This feature may have been developed after this post, but I wanted to share for future readers. Jun 11, 2014 at 15:45
  • The demo page you linked to actually doesn't work, there's an uncaught syntax error in console. Jul 2, 2014 at 17:37
  • 2
    Please note that $cacheFactory does not cache the data for the current session, it caches the data in memory, so only as long as your angular application is alive. A page refresh, for example, kills it. @Blackhole could you update that please to avoid misleading people?
    – tsemer
    Jul 20, 2016 at 16:17
21

An alternative solution is http://jmdobry.github.io/angular-cache/ which works well with ngResource and can also easily be configured to sync to localStorage, so requests don't need to be re-done after page refresh.

$resource('my/kewl/url/:key', { key: '@key' }, {
  'get': { method: 'GET', 
           cache: $angularCacheFactory('MyKewlResourceCache', { 
                                          storageMode: 'localStorage' })
         }
});
1
  • I feel like this one is more powerful than the solution from the accepted answer. Thanks about the $resource don't see it in its official website Mar 19, 2015 at 22:45
1

$cacheFactory seems to be clearly NOT your solution, because as Blackhole said, the cache will be cleared each time session expires. $cacheFactory is just a memcache implementation the Angular way.

angular-cache is just an helper API, basically it adds option to $cacheFactory and one of this option is to store cache into persistent storage (like localStorage).

So if you want to store data in persistent storage you can use use one of the module available like angular-local-storage or use $cookieStore but it will create cookies...

1
  • Again, $cacheFactory does not cache the data for the current session, it caches the data in memory, so only as long as your angular application is alive. A page refresh, for example, kills it. @user3305685 could you update that please to avoid misleading people?
    – tsemer
    Jul 20, 2016 at 16:21
0

Another angular module that does the job : https://github.com/jmdobry/angular-cache

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.