如何在线保存/加载数据（使用AJAX和JSON存储数据）和离线（本地）

Question

我需要帮助找出最佳的，跨浏览器兼容的方式来“保存”用户输入并将它们存储在本地（离线模式）和服务器（在线）上。程序将由Android和iOS使用。

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

您好我一直在研究AJAX，JSON，XMLHttpRequest，REST，Java和HTML5（特别是localStorage）。

场景:(在线/离线阅读图书，保存页面进度）

1. 用户登录Web服务，Web服务允许用户下载“html网页书”（使用HTML5浏览器查看）。

2. 每次翻页后，REST API都会使用GET请求将进度数据发布到Web服务器。同时，创建JSON字符串并将其保存在服务器上的文件中。 （让我们说“ProgressData.txt”）

3. 在后台，ProgressData.txt的单独“副本”会在移动设备上保存。然后用户离开互联网连接并继续阅读HTML Book。

4. 当用户重新获得连接时，ProgressData.txt将使用REST API上传到服务器，它将使用包含所有用户ProgressData的NEW .txt文件更新旧服务器文件。

可能的解决方案：

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

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

Java applet看起来很可能。另外还不确定Java如何在Android / iOS上运行。

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

问题：

我需要知道在设备联机或离线时跟踪用户进度的最佳方法。这样做的最佳方式是什么？

Answer 1

前几天我偶然发现了store.js这可能有助于解决跨浏览器的本地存储问题。它来自this article关于本地存储。

我认为在线/离线跟踪的最佳选择是在翻页时通过AJAX调用ping服务器。始终尝试在页面转弯时更新服务器，但如果失败，请处理故障并在本地存储进度。每个页面转向将修改本地存储的进度文件，或者如果连接已恢复，则只需使用进度更新服务器。

我想到的问题可能是，如果某本书离线完成，那么无论是否恢复连接，都不会有更多点击会触发同步。您可能想要考虑一本书末尾的手动同步链接/按钮。或者可能始终提供手动同步？对用户进行一些控制并描述整个离线/在线阅读场景。您可能会发现让用户更轻松地完成工作......如果他们不同步那么这就是他们的问题！

Answer 2

我建议只使用cookie来存储当前状态。这样，它会随着每个用户请求自动发送到您的服务器（因此无需构建自定义服务器端API以在连接丢失后接收状态，并且无需任何自定义客户端代码来发送数据到服务器），即使用户丢失了互联网连接，仍然可以更新。此外，它不依赖于HTML5功能，因此您无需将人员限制为支持HTML5的浏览器。

在任何情况下，处理存储当前状态的最佳方法是在“下一页”链接（或按钮，或其他任何东西）上调用函数和集合时使用简单的onclick处理程序cookie值与当前位置无关。请注意，因为状态始终在客户端可用，并且在每次请求时都发送到服务器，所以不需要维护状态服务器端的任何显式副本，除非您希望能够记住用户的位置，即使他们手动删除他们的cookie（在我看来这是一种矫枉过正的行为）。

您可能需要查看W3C Example Code来设置/获取JavaScript中的Cookie值。

此外，这是一个website，演示了与您想要构建的功能类似的功能。它使用cookie来记录用户在阅读各种webcomics时的位置。几乎和你想要的一样，除了漫画而不是书籍。

Answer 3

以下是2个截屏视频，可以帮助您解决问题。

他们在Ruby on Rails中，但也许你可以得到这个想法。它使用的是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 4

如果不需要持续的互联网连接，那么跟踪服务器端数据库和客户端本地存储中的进度是明智的。

Evercookie是一个备受争议的javascript api，旨在使用任何可用的方式提供本地存储，包括标准cookie，Flash共享对象，Silverlight，浏览器历史记录和HTML 5存储。当用户离线并且恢复连接时，数据应该保持不变，将cookie和数据库与给定书籍的页码更大的数据同步。 Droid拥有Flash，Flash共享对象数据是桌面和基于Web的应用程序可用的“cookie”。

强大的力量带来了巨大的责任： http://samy.pl/evercookie/