如何在线保存/加载数据(使用AJAX和JSON存储数据)和脱机(本地)

Question

我需要帮助找出最好的，跨浏览器兼容的方式，“保存”用户输入，并存储在本地(离线模式)和服务器(在线)。程序将由安卓和iOS使用。

我想知道在设备在线或离线时跟踪用户进度的最佳方法。

你好，我一直在研究AJAX、JSON、XMLHttpRequest、REST、Java和HTML5 (特别是localStorage)。

场景：(在线/脱机阅读一本书，保存页面进度)

1. 用户登录到webpage，webpage允许用户下载"html网页簿“(使用HTML5浏览器查看)。
2. 每次转页后，REST都会使用GET请求将进度数据发布到Web服务器。同时，创建一个JSON字符串并将其保存在服务器上的一个文件中。(让我们说"ProgressData.txt")
3. 在后台，ProgressData.txt的一个单独的“副本”在本地保存在移动设备上。然后，用户离开internet连接，继续阅读HTML。
4. 当用户恢复连接时，将使用REST将ProgressData.txt上载到服务器，在该服务器中，它将用新的.txt文件与所有用户ProgressData更新旧的服务器文件。

可能的解决方案：

HTML5 localStorage解决方案看起来不错。jQuery甚至简化了它：http://plugins.jquery.com/project/html5Storage

直接的Javascript看起来很适合服务器端存储，但是它无法访问移动设备的物理硬盘驱动器，从而阻止了任何类型的离线存储。

Java小程序看起来是可能的。另外，不确定Java是如何在Android/iOS中运行的。

我不想每次用户离线时都从移动设备上运行本地主机(PHP/Apache/Python)，不过这可能是解决方案的所在。我偶然发现了一个强大的工具：http://couchdb.apache.org/

问题：

当设备在线或脱机时，我需要知道跟踪用户进度的最佳方法。做这件事最好的方法是什么？

Answer 1

这里有两个屏幕可以帮助你解决你的问题。

它们在中，但是也许您可以得到这个想法。它正在使用html5缓存清单。

希望它能帮到你！

http://railscasts.com/episodes/247-offline-apps-part-1

http://railscasts.com/episodes/248-offline-apps-part-2

一些更多的资源(对不起，我自己没有使用html5缓存清单的经验)

http://diveintohtml5.ep.io/offline.html

http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html

Answer 2

前几天我偶然发现了store.js，这可能有助于解决跨浏览器的本地存储问题。这是来自这篇文章关于本地存储的信息。

我认为在线/离线跟踪的最佳选择是在页面被打开时通过AJAX调用来平平服务器。始终尝试在页面翻转时更新服务器，但如果服务器失败，则处理故障并在本地存储进度。每次翻页都会修改本地存储的进度文件，或者如果恢复连接，则只需使用进度更新服务器即可。

我认为可能会出现的问题是，如果一本书离线完成，那么无论恢复的连接如何，都不会有更多的点击触发同步。您可能希望在书的末尾考虑手动同步链接/按钮。或者任何时候都有手动同步？给用户一些控制，并描述整个脱机/在线阅读场景。您可能会发现，让用户做…工作就更容易了。如果他们不同步，那就是他们的问题！

Answer 3

我建议只使用cookie来存储当前状态。通过这种方式，它将通过每个用户请求自动发送到您的服务器(因此无需构建一个自定义服务器端API，用于在失去连接后接收状态，也不需要有任何自定义客户端代码来将数据发送到服务器)，即使用户已经失去了Internet连接，也仍然可以更新。此外，它也不依赖于HTML5特性，因此您不需要限制用户使用HTML5 5支持的浏览器。

在任何情况下，处理存储当前状态的最好方法是在“下一页”链接(或按钮，或它是什么)上有一个简单的onclick处理程序，它调用函数并将cookie值设置为当前位置。请注意，由于状态始终是可用的客户端，并在每个请求时发送到服务器，因此不需要维护状态服务器端的任何显式副本，除非您希望能够记住用户的位置，即使他们手动删除了cookie(我认为这是过份的)。

您可能需要查看W3C示例代码，以在JavaScript中设置/获取cookie值。

另外，这里有一个网站，它演示了与您想要构建的功能类似的功能。它使用cookie来跟踪用户在阅读各种网络漫画时的位置。听起来和你想要的差不多，除了漫画而不是书。