Question

我正在开发使用Angular2的应用程序和后端的离子我正在使用节点。在我的应用程序中，我有一些html表单，这些表单包含常见的输入字段和图像上传。

如果用户没有网络连接，用户可以毫无问题地完成表单。一旦他获得互联网连接，它就会上传到服务器。

我们如何在网络和移动设备中单独实现此功能？

这种情况的最佳解决方案是什么。请建议我不要对此有任何清晰的了解。

Answer 1

要了解哪些离线方案适合移动网络应用，首先要了解使其成为可能的关键技术。

移动网络应用程序可以使用三种核心功能构建，所有这些都是新HTML5标准的一部分：

浏览器应用程序缓存页面
本地存储
本地数据库

浏览器应用程序缓存允许创建清单，列出应缓存并可脱机使用的页面。通常，当您访问URL时，会发出服务器请求以返回该页面。设置应用程序缓存清单会告诉浏览器如何使用已下载的页面，而不是在不再有网络连接时立即显示错误。

本地存储是使用与浏览器Cookie类似的键/值系统保留本地Web应用程序数据（即使在浏览器关闭时）的标准。但是，它在两个重要方面与浏览器cookie不同。首先，每次HTTP请求都会向服务器重新发送cookie，当服务器不需要时，会浪费大量带宽来重新发送所有脱机数据。其次，cookie往往最多可以达到大约4k的数据，而本地存储通常会为应用程序提供多达5 MB的数据来处理每个域。 5 MB听起来可能不是很多，但仔细使用后，它可以在离线本地存储方面走得很远。

本地数据库删除了本地存储的5MB限制，并允许对数据建立索引，以便可以快速查询多个属性。这只是目前HTML5提出的标准;到目前为止，只有Internet Explorer和Firefox实现了它。 Safari和Chrome使用旧的，不推荐使用的称为Web SQL的系统。这意味着如果您需要此级别的功能，则需要大量额外的工作和复杂性来支持所有主流浏览器的标准。希望情况并非总是如此，主流浏览器将符合最终的HTML5规范。

Answer 2

当用户离线时，将表单数据存储在localStorage中，当它联机时，将数据从localStorage上传到服务器并从localStorage中删除数据。

＆＃xA;＆＃xA;

  localStorage.setItem（'form_data'，formData）//将数据存储在localStorage＆＃xA;＆＃xA; localStorage.getItem（'form_data'）中//获取表单localStorage＆＃xA;＆＃xA; localStorage.removeItem（'form_data' ）//从localStrage＆＃xA;

＆＃xA;＆＃xA;

从窗口添加eventlistner

＆＃xA;＆＃xA;

  if（typeof navigator.onLine！=='undefined'）{＆＃xA; window.addEventListener（'offline'，function（ev）{＆＃xA; userOffline（）;＆＃xA;}）; ＆＃XA; window.addEventListener（'online'，function（ev）{＆＃xA; userOnline（）;＆＃xA;}）; ＆＃xA;}＆＃xA;＆＃xA;＆＃xA;函数userOnline（）{} //当用户在线＆＃xA;函数userOffline（）{} //当用户离线＆＃xA;  < / PRE>＆＃XA;

混合应用程序中的脱机数据缓存机制

2 个答案: