用于缓存 JSON 数据的 Polymer 1.0 策略答案

【问题标题】：Polymer 1.0 strategies for caching JSON data用于缓存 JSON 数据的 Polymer 1.0 策略
【发布时间】：2016-01-07 16:47:43
【问题描述】：

我正在努力学习 Polymer。我的目标是创建一个完全独立的元素（在应用程序内路由，管理应用程序内不同子元素的数据需求）。我的目标是创建一个用户可以注入现有网站的单一元素。例如：

<my-app key="XXXXXXXXXX"></my-app>

'my-app' 被注入现有网站。 key 的值与内部 web-api 调用一起使用，以检索特定于此实现的数据。

“my-app”的内部结构可能是这样的：

<dom-module id="my-app">
     <template>
          <game-list></game-list>
          <game-detail></game-detail>
          <play-game></play-game>
          <leader-board></leader-board>
     </template>
</dom-module>

'game-list' 提供用户可能玩的游戏列表。这里的内容取决于'key'属性的值。同样，“游戏详细信息”将是从“游戏列表”中选择的游戏的详细信息。 “play-game”是允许用户玩他们选择的游戏的 UI。最后，“排行榜”显示使用此应用的所有玩家的排名。

我需要一些关于管理每个子元素的 json-data 需求的策略方面的帮助。

缓存为“游戏列表”元素检索到的游戏列表的最佳做法是什么？如果用户从“游戏列表”导航到“游戏详细信息”，然后返回“游戏列表”，我不想随后调用网络服务来检索游戏列表。
从 'game-list' 导航到 'game-detail' 将使用所选游戏的 'id' 更新 URL（路径：'/game-detail/23'）。我希望能够为 Id 为 23 的调用获取游戏详细信息。因此，如果他们再次返回到“/game-detail/23”，则不会调用 WebAPI。但是，如果他们导航到“/game-detail/326”，应用会意识到 326 与 23 不同，因此它会重新调用 WebApi。

总而言之，缓存数据的策略/最佳实践是什么？

我做了很多 AngularJS 开发并使用 Angular 的服务（它们是单例）来缓存 UI 的数据。有没有办法用聚合物元素做类似的事情？有没有办法创建充当数据存储的内部机制？

我想我可以依赖本地存储，但更喜欢某种类型的“服务”，它充当所有元素都可以利用以检索其数据的资源。这个“服务”将负责向 WebAPI（通过 iron-ajax）发送请求并根据需要缓存数据。

感谢您的帮助。

【问题讨论】：

标签： polymer polymer-1.0

【解决方案1】：

在一个应用程序中，我使用iron-localstorage 来缓存后端数据。

您可以创建自己的 backend-element 包装 iron-localstorage 并透明地处理所有元素的缓存。

您还可以查看iron-meta，它使用单态模式在不同组件之间共享数据。

【讨论】：