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

我正在使用Angular2和离子在后端开发应用程序，我正在使用节点。在我的应用程序中，我有一些HTML表单，这些表单包含通用输入字段和图像上传。混合应用程序中的离线数据缓存机制

如果用户没有网络连接，用户可以在没有任何问题的情况下完成表单。一旦他获得互联网连接，它将上传到服务器。

我们如何才能在网页和手机中分别实现此功能？

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

来源

2017-03-09 Team

要了解脱机场景适合移动Web应用程序的合适人选，它有助于首先了解使之成为可能的关键技术。

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

本地存储

本地数据库

浏览器应用程序缓存

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

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

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

来源

2017-03-09 09:02:33 Gaurav

我有一个疑问。是否有可能使用谷歌驱动器脱机缓存数据存储和图片上传。 – Team

当用户离线时，将表单数据存储在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

来源

2017-03-09 09:09:43

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

回答

相关问题