[英]Offline webapp. How to store data?
I want to develop a webapp to manage sports competitions.我想开发一个 webapp 来管理体育比赛。 It must be able to run completely offline, store data locally and post the results online via AJAX whenever there is an internet connection available - this may be the day after.
它必须能够完全离线运行,在本地存储数据并在有可用互联网连接时通过 AJAX 在线发布结果 - 这可能是后天。
How to store data using Javascript?如何使用Javascript存储数据?
If you are supporting modern browsers, you can make use of HTML5 Local Storage .如果您支持现代浏览器,则可以使用HTML5 本地存储。
Persistent local storage is one of the areas where native client applications have held an advantage over web applications.
持久性本地存储是本机客户端应用程序相对于 Web 应用程序具有优势的领域之一。 For native applications, the operating system typically provides an abstraction layer for storing and retrieving application-specific data like preferences or runtime state.
对于本机应用程序,操作系统通常提供一个抽象层,用于存储和检索特定于应用程序的数据,如首选项或运行时状态。 These values may be stored in the registry, INI files, XML files, or some other place according to platform convention.
根据平台约定,这些值可能存储在注册表、INI 文件、XML 文件或其他地方。 If your native client application needs local storage beyond key/value pairs, you can embed your own database, invent your own file format, or any number of other solutions.
如果您的本机客户端应用程序需要除键/值对之外的本地存储,您可以嵌入自己的数据库、发明自己的文件格式或任何数量的其他解决方案。
Example例子
// 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);
Older Browsers旧浏览器
Depending on how complex your data structures are that you want to store you could look at indexedDB .根据您要存储的数据结构的复杂程度,您可以查看indexedDB 。 It's availability is still pretty bleeding edge but with a polyfil you can target the majority of modern desktop and mobile browsers.
它的可用性仍然非常先进,但是使用polyfil,您可以针对大多数现代桌面和移动浏览器。
The data stored is no more secure than any other client storage model since it's meant to be read with JavaScript.存储的数据并不比任何其他客户端存储模型更安全,因为它旨在使用 JavaScript 读取。
The API itself is pretty complex to dive straight into using so you might want to look at wrapper APIs such as PouchDB which syncs with CouchDB or if you want something much simpler there's db.js . API 本身非常复杂,无法直接使用,因此您可能需要查看包装器 API,例如与 CouchDB 同步的PouchDB ,或者如果您想要更简单的东西,还有db.js 。
You can use HTML5 Local Storage您可以使用 HTML5 本地存储
Use polyfill for older browser https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-storage-localstorage-and-sessionstorage对旧浏览器使用 polyfill https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-storage-localstorage-and-sessionstorage
Exactly what you want:正是你想要的:
A lot of stuff, but a cool solution enough for the trouble.很多东西,但一个很酷的解决方案足以解决问题。 Also, this CouchDB thing is so easy I can bet you'll read and learn everything in one or two days.
此外,CouchDB 这个东西非常简单,我敢打赌你会在一两天内阅读和学习所有内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.