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

Posted 2023-03-12

【中文标题】如何在线保存/加载数据（使用 AJAX 和 JSON 存储数据）和离线（本地）

【英文标题】：How to save/load data Online(Store data with AJAX and JSON) and Offline (locally)

【发布时间】：2011-02-22 00:59:11

【问题描述】：

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

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

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

场景：（在线/离线看书，保存页面进度）

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

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

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

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

可能的解决方案：

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

Straight javascript 看起来很适合服务器端存储，但它无法访问移动设备的物理硬盘，因此无法进行任何形式的离线保存。

Java 小程序看起来可行。另外不确定Java如何在Android/iOS上运行。

我不想每次用户下线时都必须从移动设备运行 localhost(php/Apache/Python)，但这可能是解决方案所在。我确实偶然发现了这个强大的工具：http://couchdb.apache.org/

问题：

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

【问题讨论】：

斯科特，你找到什么了吗？

@Flakerim，在过去的一个月里，我一直在使用 javascript、php 甚至 Java，寻找简单、跨浏览器兼容的解决方案来解决“在线/离线数据库同步”问题。我的结论是这样的： 1. 使用 Javascript 来捕获你需要存储的所有数据。

2.在线时，使用 PHP curl 函数（或类似的东西......可能是 Ruby on Rails）将所有数据发布到服务器。 3. 在所有浏览（在线或离线）期间，使用 cookie 或 html5 网络存储将所有数据保存在本地。

嗯，我认为 CouchDB 是答案，但据我所知，它必须安装在客户端。我需要 Couch，因为我想保存的不仅仅是书页码。另外，我需要从服务器端访问它，所以如果连接在用户没有打开客户端时出现，我想同步它们，并且在用户打开客户端后它已经同步了。我需要一个不需要安装并且可以从 HTTP 访问的数据库。就像 web root 或 mdb 中的文本文件之类的。

【参考方案1】：

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

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

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

【参考方案2】：

这里有 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

【讨论】：

Rails casts 看起来很有希望！！

我检查了 Rails，我同意@Flakerim，绝对值得研究。希望不久。我也在玩 Cashe 清单，并得出结论，它提供了 cookie 的可行替代方案，但将用户限制为 HTML 5 浏览器。这个网站也有一些很好的 HTML 5 现金的东西。 introducinghtml5.com

恐怕所有浏览器都很难做到这一点......谢谢你的链接。

【参考方案3】：

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

在任何情况下，处理存储当前状态的最佳方法是在“下一页”链接（或按钮，或其他任何内容）上设置一个简单的 onclick 处理程序，该处理程序调用函数并设置 cookie无论当前位置是什么值。请注意，由于状态始终在客户端可用，并且在每次请求时都发送到服务器，因此无需维护状态服务器端的任何显式副本，除非您希望能够记住用户的位置，即使他们手动删除了他们的 cookie（在我看来这太过分了）。

您可能想查看W3C Example Code 以在 JavaScript 中设置/获取 cookie 值。

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

【讨论】：

我需要的是：如果连接离线，保存到本地，当它与主数据库在线同步时。

@Flakerim - 这基本上就是给你的。如果您想与服务器保持实时同步，那么只需添加一些代码，以便每当 cookie 的值更改时，都会向服务器发送一个新请求，并为请求设置错误处理程序，以便在请求失败时它会在一些合理的延迟（如 60 秒）后再次尝试。或者您可以采用更简单但效率较低的方式，每 60 秒触发一次请求（例如使用 setInterval），以确保服务器始终拥有最新的状态信息。

【参考方案4】：

如果不需要持续的互联网连接，最好同时跟踪服务器端数据库和客户端本地存储的进度。

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

能力越大，责任越大： http://samy.pl/evercookie/