本地存储 vs AngularJS $cacheFactory

Question

我有一个存储大量客户端数据的问题，但是我无法决定哪种方式更好。现在我正在使用 AngularJS 的 cacheFactory，它能正常工作，但所有数据都会在新的会话中重新加载。是否值得改用本地存储？

- Rasalom

---

你好，你可以使用WebStorage，然后通过工厂获取数据。http://www.w3schools.com/html/html5_webstorage.asp - schwertfisch

我最终选择了https://github.com/gsklee/ngStorage Angular方式：没有Getter和Setter的废话！ - mb21

值得注意的是，本地存储不安全。 - Blowsie

@mb21 ngStorage已经死了，还有一些重要的PR未处理。 - Blowsie

@Rodney，它没有活动和关键问题。 - Blowsie

Answer 1

如果你的目标是存储客户端和持久数据，那么不能使用 $cacheFactory，因为它只会缓存当前会话中的数据。

一个解决方案是使用新的本地存储API。 这个很棒的Angular模块可以为你完成所有繁琐的工作，甚至可以为旧版浏览器回退到Cookies！

- Blackhole

---

不，您应该在存储对象之前对它们进行序列化（并在读取时进行反序列化），通常使用JSON格式。但是直接存储对象并没有太多意义，因为所有持久性存储都必须使用文件，并且是线性化数据。 - Blackhole

点赞本地存储模块的提及。省去了我很多编码！ - masimplo

我来晚了，但我查看了localstorage模块的源代码，它可以存储对象而无需你自己进行JSON编码/解码（它会为你完成这一过程）。这个功能可能是在这篇文章发表之后开发出来的，但我想与未来的读者分享。 - TorranceScott

@CharlieS 你可以在 bugtracker 上向模块的作者报告问题。这应该会很快得到修复！ - Blackhole

请注意，$cacheFactory不会为当前会话缓存数据，它将数据缓存在内存中，因此只要您的Angular应用程序处于活动状态。例如，页面刷新会导致缓存失效。@Blackhole，您能否更新一下以避免误导人们？ - tsemer

Answer 2

另一种解决方案是http://jmdobry.github.io/angular-cache/，它与ngResource搭配良好，并且可以轻松配置为同步到localStorage，因此在页面刷新后不需要重新执行请求。

$resource('my/kewl/url/:key', { key: '@key' }, {
  'get': { method: 'GET', 
           cache: $angularCacheFactory('MyKewlResourceCache', { 
                                          storageMode: 'localStorage' })
         }
});

- tmaximini

---

我觉得这个解决方案比被采纳的答案更强大。关于 $resource，感谢您提供信息，但我在官方网站上没有找到相关内容。 - Phung D. An

Answer 3

$cacheFactory不是你的解决方案，因为正如Blackhole所说，缓存将在每次会话过期时被清除。$cacheFactory只是一个Angular方式的memcache实现。

angular-cache只是一个辅助API，基本上它添加了$cacheFactory选项之一，即将缓存存储到持久存储（例如localStorage）中。

因此，如果您想将数据存储到持久性存储中，可以使用其中一个可用的模块，例如angular-local-storage 或使用$cookieStore，但这将创建cookie...

- Gut

---

$cacheFactory并不会为当前会话缓存数据，它只是将数据缓存在内存中，所以仅在您的Angular应用程序运行期间有效。例如，页面刷新会将其清空。@user3305685，你能否更新一下这个内容，以避免误导他人？ - tsemer

Answer 4

另一个可以完成任务的Angular模块：https://github.com/jmdobry/angular-cache

- hugsbrugs