Phonegap在本地设备上缓存Json数据

Question

自从上周开始，我一直在研究移动应用开发。我的目标是使用Phonegap缓存Json文件，以便即使没有wifi或互联网连接，WebApp也能正常工作。 我很困惑。我已经阅读了许多关于离线缓存的方法。 但我不明白的是，如何使用缓存的Json文件来渲染我的WebApp以脱机模式运行。

我一直认为它可以按以下方式工作： 假设我有一个响应式的网站。该网站的内容是基于Json数据动态生成的。 现在我想将此网站带到移动设备上。 我从Phonegap开始。我用webview或InAppBrowser编写我的第一个简单应用程序，其中包含我的网站。 现在，我想让这个应用程序能够基于缓存的Json数据在脱机状态下工作。 这就是我卡住的地方。我不知道接下来该怎么做。 我是否请求Json数据并将这些数据存储到我的设备的本地文件系统中，使用PhoneGap File-Api？那么如何使用这些数据来构建我的布局？ 据我所理解的，我有一个PhoneGap容器，它在响应（HTML5、CCS、JS）网站和本地功能之间建立桥梁。 因此，我所理解的是，我可以在PhonGap容器中加载我的网站，它看起来很像一个应用程序。但是当我脱机时，必须有数据缓存。最重要的是Json数据，这是标记所基于的数据。我如何从本地设备加载此Json数据并使用此数据进行渲染？ 今天，我正在使用带有InAppBrowser的PhoneGap构建一个简单的应用程序。然后我没有找到任何教程，说明如何缓存由响应式网站提取的Json数据。我可以看到这些数据已被使用（通过Fiddler作为反向代理）。因此，这些数据必须传输到InAppBrowser。我想我误解了什么。也许我必须将所有内容包含在index.html中（我正在使用eclipse和phonegap和android）。 有人能否在一个简单的示例中告诉我如何调用我的网站、缓存Json数据（大文件，在本地设备上可达100MB，使用PhoneGap File-Api），并在离线时使用此Json文件来渲染我的网站？这有可能吗？

更新： 我在互联网上找到了这篇文章，可以进行调整以满足我的需求：here 这个例子中的代码，是从index.html中获取还是在网站中使用？我是否也需要将cordova.js包含在我的网站中？

谢谢。

- TorchMan

Answer 1

通常情况下，您可以将JSON数据存储到HTML5本地存储中并使其离线。 但是，本地存储仅提供最多5MB的大小限制。

但是，如您所说，如果您正在处理大量数据，则可以通过以下方法完成：

- 创建Phonegap自定义插件以处理所有网络服务调用 - 使用此插件，也将JSON数据存储到本地存储数据库中(由于使用设备存储，因此没有大小限制)

因此，在您的HTML代码中不会有ajax调用，而是由插件来处理。

- mayur

---

谢谢你的回答。我可以尝试这种方法，但是我在这里找到了一些东西：[链接]（http://www.raymondcamden.com/index.cfm/2012/1/19/Downloading-files-to-a-PhoneGap-application--Part-1）。我的问题是：当我在InAppBrowser或WebView中加载我的网站时，如何在离线模式下基于缓存的Json数据重建标记？目前我知道你可以编写一个包含所有内容（JS，AJAX，CSS等）的SPA。所以现在我完全控制标记。并且可以使用我的缓存的Json数据重建它。 - TorchMan

Answer 2

你可以将 JSON 保存到文件系统中...而不需要使用 LocalStorage 或数据库。

- user826822

---

你说得对。我已经成功下载了大约130MB的Json数据，以便在需要时解析它并构建我的标记（基于用户交互）。我将数据存储在SD卡上 - 当我的应用程序离线时 - 从SD卡中提取数据，否则使用ajax请求来进行游戏。使用jQuery Deferred和Promises非常有帮助，以避免在Phonegap中运行进入spaghetty代码。 - TorchMan