离线Web应用。如何存储数据？

Question

介绍：

应用程序必须能够完全离线运行，本地存储数据，并在有网络连接时通过AJAX在线发布数据 - 这可能会在几天后进行。

问题：

如何使用Javascript存储数据？

附加说明：

• 我不想使用任何服务器端技术。
• 它必须像数据库一样安全。我已经阅读了关于cookie和html5存储的内容，但它们都不令人信服。

- Hertzu

---

使用HTML5本地存储 - Tamil Selvan C

如果发生在客户端，那就不安全了。我可以修改请求、更改你的脚本并向你的服务器发送任何我想要的内容。 - Blender

@Blender，如何在HTTPS连接上修改请求而不在客户端计算机上植入病毒、蠕虫等？ - markasoftware

@Markasoftware: 如果我是实际客户端，HTTPS并不会有任何区别。 - Blender

好的，那很有道理。我只是觉得他可能在谈论防止黑客攻击，而不是保护客户端。 - markasoftware

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);

浏览器兼容性

---

旧浏览器

使用填充库。

- Praveen Kumar Purushothaman

Answer 2

根据您想要存储的数据结构的复杂程度，您可以考虑使用indexedDB。它的可用性仍然相当先进，但是通过polyfill，您可以针对大多数现代桌面和移动浏览器进行定位。

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

API本身相当复杂，在直接使用之前，您可能需要查看包装器API，例如同步CouchDB的PouchDB，或者如果您想要更简单的东西，则有db.js。

- Aaron Powell

Answer 3

您可以使用HTML5本地存储

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

- Tamil Selvan C

---

我想我会这样做。但是如果我想创建一个离线网络并使本地存储数据库对所有用户可用怎么办？ - Hertzu

Answer 4

你想要的正是这个：

• 你可以在IrisCouch上设置一个CouchDB实例来存储你的数据。CouchDB是一个充当Web服务器的数据库，因此它可以基于自己的数据提供HTML页面--这种使用CouchDB（用于服务页面）通常被称为CouchApp。
• 所以你需要学习CouchDB并编写一个HTML/Javascript/CouchDB风格的应用程序来提供你的页面。有工具可以简化这个过程。
• 之后，你只需要将数据发送到你的CouchDB数据库中，它就会出现在你的网页上。你将使用PouchDB来管理客户端的事务，它是CouchDB的一种实现，可以在你的浏览器上运行并将你的数据保存在本地，这样你就永远不会失去它，并自动更新你的本地数据和CouchDB服务器之间的数据。这是互联网离线存储的最前沿。
• 为了确保客户端不会向服务器发送错误的数据，你可以设置身份验证（因此连接Pouch和Couch时需要提供密码），或者你可以设置验证函数（因此服务器只接受符合你定义的某些参数的数据存储请求）。这两种方法在我之前链接的指南中都有很好的解释（这里），但在你学习CouchDB的过程中，你肯定会遇到所有这些问题。

很多东西，但解决麻烦的方法还是不错的。此外，这个CouchDB的东西非常容易，我敢打赌你只需要一两天就能阅读和学习所有内容。

- fiatjaf