离线webapp。如何存储数据？

Question

简介：

我打算创建一个用于管理乒乓球锦标赛的webapp。它将脱机运行并在本地存储数据，并在一天结束时（或后一天）连接到互联网并通过ajax在线发布结果。

问题：

如何使用Javascript存储数据？

附加说明：

• 我不想使用任何服务器端技术。
• 它必须像数据库一样安全。我读过关于cookies和html5存储的内容，但它们都没有说服力。

Answer 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。

Answer 2

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

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

直接使用API​​本身非常复杂，因此您可能希望查看与CouchDB同步的PouchDB等包装API，或者如果您想要更简单的db.js。

Answer 3

你想要的是什么：

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

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

Answer 4

您可以使用HTML5本地存储

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