一种移动端H5网页数据交换方法技术

本发明专利技术涉及一种移动端H5网页数据交换方法，该方法包括：在APP内部或后台开辟存储空间，用于存储网页数据；网页发出本地数据交换请求，对本地数据交换请求进行校验，若当前支持APP内部存储，则网页与APP内部存储进行数据交换，若当前支持后台存储，则网页与后台存储进行数据交换。与现有技术相比，本发明专利技术实现了网页数据的稳定交换，尤其利于跨页面数据之间的交互。的交互。的交互。

【技术实现步骤摘要】
一种移动端H5网页数据交换方法


[0001]本专利技术涉及数据存储
，尤其是涉及一种移动端H5网页数据交换方法。

技术介绍

[0002]随着移动设备的普及、网民手机使用率的增加，作为传统安卓、IOS原生功能受限于版本迭代；作为“生对了时候的”HTML5来说，确实在移动端的延展上做出巨大改变。随着各大浏览器对HTML5的支持，HTML5的适用范围及使用领域也变的更为丰富和广泛。
[0003]移动端手机会经常需要临时的数据存储，然而在移动端首次加载时，localStorage、sessionStorage在跨页面数据的存取，会存在新开页面首次无法获取；这一现象不仅仅时安卓，对于将WebView更换为WKWebView的苹果也有弊病。目前关于该问题处理分为如下几种方案：
[0004]1)因为是首次网页获取数据时有问题，在页面加载完成后，优先判断是否可以获取该数据，如果不能那么直接调用window.location.reload进行页面重载，重载后页面已经是第二次了，就不存在数据无法获取的问题。
[0005]2)页面在进行localStorage数据存储时，需要页面在完成后由浏览器往localStorage这逐条设置进去了，所以可以在将获取数据的接口定义成回调驱动模式，开启setInterval定时器，轮询获取数据，直到获取到后回调指定初始化页面的方法。
[0006]目前可供H5页面进行临时存储的技术cookies、locaStorage、sessionStorage。然而不管是哪种存储手段，都无法处理跨页面临时存储数据的稳定读取。在APP实际开发过程中，为保障体验，会将网页间的跳转变成APP开启新的webkit新窗口的方式打开，此时对于新的网页想要读取前一网页存储的数据时就会出现首次无法读取的怪象，另外，新开窗口进行的运行结果想要带回前一网页，也同样存在无法获取数据的问题。按照现有技术，只能是在新开网页或者回到前一网页在去服务器重新获取的方式解决，虽然可以解决问题，但是增加了后端服务器的压力，造成资源和性能的浪费。

技术实现思路

[0007]本专利技术的目的就是为了克服上述现有技术存在的缺陷而提供一种移动端H5网页数据交换方法。
[0008]本专利技术的目的可以通过以下技术方案来实现：
[0009]一种移动端H5网页数据交换方法，该方法包括：
[0010]在APP内部或后台开辟存储空间，用于存储网页数据；
[0011]网页发出本地数据交换请求，对本地数据交换请求进行校验，若当前支持APP内部存储，则网页与APP内部存储进行数据交换，若当前支持后台存储，则网页与后台存储进行数据交换。
[0012]优选地，所述的数据交换包括数据的增、删、改、查。
[0013]优选地，若H5页面挂载的平台为自主开发的APP，则在APP内部开辟APP内部存储空
间。
[0014]优选地，若H5页面挂载的平台为非自主开发的APP，则在后台开辟后台存储空间。
[0015]优选地，对本地数据交换请求进行校验时，若当前既不支持APP内部存储，也不支持后台存储，则将本地数据交换请求转入浏览器本地存储。
[0016]优选地，所述的后台开辟的存储空间为独立永久的redis存储区域。
[0017]优选地，所述的网页与后台存储通过socket长链接或者ajax短链接方式进行数据通信。
[0018]优选地，在APP内存存储中，对内存块进行域名绑定，同一域名下的数据实现共享。
[0019]优选地，在redis存储区域，按照域名进行数据存储。
[0020]优选地，通过JavaScript封装的校验模块对本地数据交换请求进行校验。
[0021]与现有技术相比，本专利技术具有如下优点：
[0022]本专利技术提供了一套解决网页数据稳定交换的方法，对于跨页面之间的交互会变的更加容易，结合visibilitychange事件及soket技术可以实现有好无刷新数据更新的效果，即便使用visibilitychange事件+短链接的方式，也同样可以使数据的存读取更加稳定。
附图说明
[0023]图1为本专利技术一种移动端H5网页数据交换方法的整理流程框图；
[0024]图2为本专利技术支持APP内部存储时的数据交换流程示意图；
[0025]图3为本专利技术支持外部存储时的数据交换流程示意图。
具体实施方式
[0026]下面结合附图和具体实施例对本专利技术进行详细说明。注意，以下的实施方式的说明只是实质上的例示，本专利技术并不意在对其适用物或其用途进行限定，且本专利技术并不限定于以下的实施方式。
[0027]实施例
[0028]本实施例提供一种移动端H5网页数据交换方法，该方法包括：
[0029]在APP内部或后台开辟存储空间，用于存储网页数据；
[0030]网页发出本地数据交换请求，对本地数据交换请求进行校验，若当前支持APP内部存储，则网页与APP内部存储进行数据交换，若当前支持后台存储，则网页与后台存储进行数据交换，本若当前既不支持APP内部存储，也不支持后台存储，则将本地数据交换请求转入浏览器本地存储。上述数据交换包括数据的增、删、改、查。
[0031]若H5页面挂载的平台为自主开发的APP，则在APP内部开辟APP内部存储空间。若H5页面挂载的平台为非自主开发的APP，则在后台开辟后台存储空间。所述的后台开辟的存储空间为独立永久的redis存储区域。所述的网页与后台存储通过socket长链接或者ajax短链接方式进行数据通信。在APP内存存储中，对内存块进行域名绑定，同一域名下的数据实现共享。在redis存储区域，按照域名进行数据存储。通过JavaScript封装的校验模块对本地数据交换请求进行校验。
[0032]以下针对APP内部存储以及后台存储两种情况进行具体说明，并以数据读取为例，进行具体说明：
[0033]1、在APP内部解决存储的问题
[0034]这里的APP内部为H5挂载的平台为该公司自研APP，对于此类内嵌于APP中的H5来说，解决存储失效的最安全的方式是更换现有浏览器的存储，让客户端动态开辟出一个内存块用于专门存储H5数据，客户端关闭或进程杀死后，内存块清空。客户端提供通用的方法去新增、删除、修改内存块的数据。为保证数据安全性，客户端开发需要针对该内存块进行域名绑定(即同一域名下的数据实现共享)，同时客户端需要对公布的js规范需要使用localStorage规范进行开发，具体实现如图2所示。具体解决步骤如下：
[0035]1)APP客户端在壳子内提供存储区域，公布js方式去对该存储区域进行增删改查。
[0036]2)编写兼容存储的公共js(即上图中的JS对外入口及校验逻辑)，如果支持则网页发出的存读取请求都转到APP提供的存储中，若APP提供的存储不支持，在判定浏览器本地存储是否可以正常读取数据，如果可以服务则使用浏览器存储，反之本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种移动端H5网页数据交换方法，其特征在于，该方法包括：在APP内部或后台开辟存储空间，用于存储网页数据；网页发出本地数据交换请求，对本地数据交换请求进行校验，若当前支持APP内部存储，则网页与APP内部存储进行数据交换，若当前支持后台存储，则网页与后台存储进行数据交换。2.根据权利要求1所述的一种移动端H5网页数据交换方法，其特征在于，所述的数据交换包括数据的增、删、改、查。3.根据权利要求1所述的一种移动端H5网页数据交换方法，其特征在于，若H5页面挂载的平台为自主开发的APP，则在APP内部开辟APP内部存储空间。4.根据权利要求1所述的一种移动端H5网页数据交换方法，其特征在于，若H5页面挂载的平台为非自主开发的APP，则在后台开辟后台存储空间。5.根据权利要求1所述的一种移动端H5网页数据交换方法，其特征在于，对本地数据交换请求进行校验...

【专利技术属性】
技术研发人员：陈刚，孙秋漪，
申请(专利权)人：上海浦东发展银行股份有限公司，
类型：发明
国别省市：