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

Question

介绍：

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

问题：

如何使用Javascript存储数据？

附加说明：

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

Answer 1

如果您支持现代浏览器，则可以使用HTML5 本地存储。

持久性本地存储是本机客户端应用程序相对于 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);

浏览器兼容性

---

旧浏览器

使用Polyfill 。

Answer 2

根据您要存储的数据结构的复杂程度，您可以查看indexedDB 。 它的可用性仍然非常先进，但是使用polyfil，您可以针对大多数现代桌面和移动浏览器。

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

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

Answer 3

您可以使用 HTML5 本地存储

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

Answer 4

正是你想要的：

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

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