离线网络应用程序。如何存储数据？答案

【问题标题】：Offline webapp. How to store data?离线网络应用程序。如何存储数据？
【发布时间】：2013-04-15 03:08:17
【问题描述】：

简介：

我想开发一个 web 应用来管理体育比赛。它必须能够完全离线运行，在本地存储数据并在有可用互联网连接时通过 AJAX 在线发布结果 - 这可能是后天。

问题：

如何使用 Javascript 存储数据？

附加说明：

我不想使用任何服务器端技术。
它必须像数据库一样安全。我读过关于 cookie 和 html5 存储的文章，但没有一个听起来令人信服。

【问题讨论】：

使用 html5 本地存储
如果发生在客户端，则不安全。我可以修改请求，更改您的脚本并将我想要的任何内容发送到您的服务器。
@Blender 如何在客户端计算机上不存在病毒、蠕虫等的情况下修改 HTTPS 连接上的请求？
@Markasoftware：如果我是真正的客户端，HTTPS 并没有什么不同。
好吧，这是有道理的。我只是认为他可能在谈论来自黑客而不是客户端的安全。

标签： javascript local-storage offlineapps

【解决方案1】：

如果你支持现代浏览器，你可以使用HTML5 Local Storage。

持久性本地存储是本机客户端应用程序比 Web 应用程序具有优势的领域之一。对于本机应用程序，操作系统通常提供一个抽象层，用于存储和检索特定于应用程序的数据，例如首选项或运行时状态。根据平台约定，这些值可能存储在注册表、INI 文件、XML 文件或其他位置。如果您的本地客户端应用程序需要键/值对之外的本地存储，您可以嵌入自己的数据库、发明自己的文件格式或任何数量的其他解决方案。

示例

// Save data to a the current session's store
sessionStorage.setItem("username", "John");

// Access some stored data
alert( "username = " + sessionStorage.getItem("username"));

// Get the text field that we're going to track
var field = document.getElementById("field");

// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if ( sessionStorage.getItem("autosave")) {
   // Restore the contents of the text field
   field.value = sessionStorage.getItem("autosave");
}

// Check the contents of the text field every second
setInterval(function(){
   // And save the results into the session storage object
   sessionStorage.setItem("autosave", field.value);
}, 1000);

Browser Compatibility

旧版浏览器

使用Polyfill。

【讨论】：

【解决方案2】：

根据您想要存储的数据结构的复杂程度，您可以查看indexedDB。它的可用性仍然是pretty bleeding edge，但通过polyfil，您可以定位大多数现代桌面和移动浏览器。

存储的数据并不比任何其他客户端存储模型更安全，因为它是用 JavaScript 读取的。

API 本身非常复杂，无法直接使用，因此您可能需要查看包装 API，例如与 CouchDB 同步的 PouchDB，或者如果您想要更简单的东西，可以使用 db.js。

【讨论】：

【解决方案3】：

您可以使用 HTML5 本地存储

为旧版浏览器使用 polyfill https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-storage-localstorage-and-sessionstorage

【讨论】：

我想我会这样做。但是如果我想创建一个离线网络并将本地存储数据库提供给所有用户呢？

【解决方案4】：

正是你想要的：

您可以在IrisCouch 上设置一个CouchDB 实例来存储您的数据。 CouchDB 是一个充当网络服务器的数据库，因此它可以根据自己的数据提供 html 页面——这种使用 CouchDB（提供页面）通常称为CouchApp。
所以您 learn about CouchDB 并编写一个 HTML/Javascript/CouchDB 风格的应用程序来为您的页面提供服务。有tools 可以促进这一点。
之后，您只需将数据发送到您的 CouchDB 数据库，它就会出现在您的网页上。您将使用PouchDB 管理客户端内容，这是一个在您的浏览器上运行并在本地保存数据的 CouchDB 实现，因此您永远不会丢失它，并会自动更新您在 CouchDB 服务器上的本地数据，反之亦然。它是互联网上离线存储的最前沿。
为确保客户端不会向服务器发送不良数据，您可以设置 authentication（因此要连接 Pouch 和 Couch，您需要提供密码）或者您可以设置验证函数（因此服务器将只接受与您定义的某些参数匹配的数据存储请求）。这两种方法在我之前链接的指南 (here) 中有很好的解释，但在 CouchDB 学习过程中您肯定会遇到所有这些。

很多东西，但一个很酷的解决方案足以解决问题。此外，这个 CouchDB 的东西非常简单，我敢打赌你会在一两天内阅读和学习所有内容。

【讨论】：