第三方网站返回hybrid app H5页面缓存问题应对策略

　　最近负责公司各产品线购买模块的开发，各项功能如期开发完成后测试那边反馈回来一个问题：IOS手机在点击支付宝购买后，跳转到支付宝网站时不输入支付密码，直接点返回，返回到我们自己的APP购买界面发现页面显示内容是第一次进入购买页面时候的设备信息，不能完整的还原新设备的购买界面，安卓手机不存在这个问题。经排查，原来是苹果手机的缓存策略导致，第一次点击购买的时候，参数已经注入到页面，post请求后正确跳转到第三方支付宝网站，不购买直接返回，由于苹果手机缓存了之前的购买页面，导致返回的时候不再发送post请求去服务器请求数据，只是get了缓存的一个页面，导致页面信息不对。

　　这个问题比较棘手，因为我们已经使用了cookies存储页面数据来解决从第三方网站返回时候页面参数丢失的问题，当没有页面参数传入的时候就去cookie里面取，这种方法对安卓手机是管用的，因为安卓手机是缓存的链接，但是对于IOS的缓存策略，已经不会再去发送post请求取参数了，因此我们需要单独针对IOS的移动设备做解决方案。.

　　经尝试，决定使用sessionStorage来规避IOS页面被缓存的问题。正请求使用SessionStorage来存储参数，然后和缓存的历史页面参数做对比，不一致则location.reload(true)强制刷新。关键代码如下：

beforeCreate() {
            let ua = navigator.userAgent.toLowerCase();
            if (ua.indexOf('ipad') > -1 || ua.indexOf('iphone') > -1) {
                try {
                    let key = '_purchase_page_params_',
                        deviceId = PAGE_PARAMS.deviceId;
                    if (history.length > 1) {//当从第三方页面返回
                        if (!deviceId) {  //若没有获取到设备id，则强制刷新
                            location.reload(true);
                        } else {
                            let storageParams = null,
                                str = sessionStorage.getItem(key) || '';
                            if (str) {
                                storageParams = JSON.parse(str);
                            }
                            if (storageParams && storageParams.deviceId !== deviceId) {//对比参数，不一致则强制刷新
                                location.reload(true);
                            }
                        }
                    } else {
                        sessionStorage.setItem(key, JSON.stringify(PAGE_PARAMS));
                    }
                } catch (e) {
                    console.error(e.message);
                }
            }
        }

经测试，解决此问题。