首页 文章

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

提问于
浏览
4

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

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

您好我一直在研究AJAX,JSON,XMLHttpRequest,REST,Java和HTML5(特别是localStorage) .

The scenario: (Read a book online/offline, save page progress)

  • 用户登录Web服务,Web服务允许用户下载“html网页书”(使用HTML5浏览器查看) .

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

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

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

Possible solutions:

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

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

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

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

Question:

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

4 回答

  • 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

  • 0

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

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

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

  • 0

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

    在任何情况下,处理存储当前状态的最佳方法是在"next page"链接(或按钮,或其他任何东西)上有一个简单的 onclick 处理程序,它调用一个函数并将cookie值设置为当前位置 . 请注意,因为状态始终在客户端可用,并且在每次请求时都发送到服务器,所以不需要维护状态服务器端的任何显式副本,除非您希望能够记住用户的位置,即使他们手动删除他们的cookie(在我看来这是过度的) .

    您可能需要查看W3C Example Code以在JavaScript中设置/获取cookie值 .

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

  • 0

    如果不需要持续的Internet连接,那么在服务器端数据库和客户端的本地存储中跟踪进度是明智的 .

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

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

相关问题