混合应用中的离线数据缓存机制

Question

我正在使用Angular2和Ionic在后端开发应用程序，我正在使用节点。在我的应用程序中，我有一些HTML表格这些表格包含通用输入字段和图像上传。

如果用户没有NET连接，则用户能够无需任何问题即可完成表单。一旦他当时获得Internet连接，它将上传到服务器。

我们如何在Web和Mobile中分别实现此功能？

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

Answer 1

了解哪些离线场景是移动网络应用程序的好候选者，它有助于首先了解使其成为可能的关键技术。

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

1. 页面的浏览器应用程序
2. 本地存储
3. 本地数据库

浏览器应用程序缓存允许创建清单清单，该清单应缓存并脱机。通常，当您访问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中删除数据。

localStorage.setItem('form_data', formData) //Store data in localStorage
localStorage.getItem('form_data') //Get form localStorage
localStorage.removeItem('form_data') //Remove from localStrage

在窗口上添加EventListner

if (typeof navigator.onLine !== 'undefined') { 
    window.addEventListener('offline', function (ev) { 
        userOffline();
    }); 
    window.addEventListener('online', function (ev) { 
        userOnline();
    }); 
}

function userOnline() {} // when user online
function userOffline() {} // when user offline