H5在安卓微信浏览器返回时动态获取的数据不会保留（页面刷新了数据初始化了）

解决思路：
判断机型
跳转前将动态构建的页面内容缓存在sessionStorage中
页面加载时，先从sessionStorage中获取数据

存在缺陷:
抑制了在窗口刷新能力
点击刷新，页面动态数据仍保持，不会刷新重新获取。只能关闭，重新打开

/*** resloveWechatAndroidReturnRefresh* @param {*} querySelector 要缓存的容器* @param {*} key sessionItem key* @param {*} fetchContent 动态构建页面内容方法*/
function resloveWechatAndroidReturnRefresh(querySelector, key, fetchContent ) {// 是否微信function isWx() {return /MicroMessenger\/(\d+\.\d+\.\d+)[\.\s]?/i.test(navigator.userAgent)}// 是否安卓function isAndroid() {return /android/i.test(navigator.userAgent)}if (isWx() && isAndroid()) {const storageContent = sessionStorage.getItem(key)if (storageContent) {document.querySelector(querySelector).innerHTML = storageContent} else {fetchContent()}window.onbeforeunload = function() {const catchContent =  document.querySelector(querySelector).innerHTMLif(catchContent ) window.sessionStorage.setItem(key, catchContent)}} else {fetchContent()}
}

使用：
在js中调用

$(function(){resloveWechatAndroidReturnRefresh('#new', '202205_new', fetchDataAndBuildHtml)
})

开启调试工具

<script src="https://cdn.staticfile.org/vConsole/3.13.0/vconsole.min.js"></script>
<script>var vConsole = new VConsole();
</script>

H5在安卓微信浏览器返回时动态获取的数据不会保留（页面刷新了数据初始化了）相关推荐

安卓微信浏览器返回上一页默认读取缓存解决方案
安卓微信浏览器返回上一页默认读取缓存解决方案参考文章: (1)安卓微信浏览器返回上一页默认读取缓存解决方案 (2)https://www.cnblogs.com/AlexBlogs/p/577727 ...
安卓微信浏览器无法支持input multiple的h5属性多图上传
H5手机端实现多图上传的功能但是实际上安卓手机上只能义词上传一张图片(测试的机型:小米)代码如下: 在微信开发中遇见一个问题应用上传插件安卓手机无法进行多张上传当时现象: 微信浏览器选择安卓 ...
安卓微信浏览器唤起系统内部浏览器
安卓微信浏览器唤起系统内部浏览器最近因为公司项目需求,需要做一个功能.使用微信浏览器打开高德地图导航,经试验,高德web端没有导航功能,其实现原理是调起高德APP来实现导航的操作.然后把代码写进微 ...
html5 history微信浏览器返回不刷新
History API与浏览器历史堆栈管理: 移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现 ...
H5开发在微信浏览器上,出现“白屏”问题
微信开发: H5开发在微信浏览器上,出现"白屏"问题在开发微信公众号的页面时,应该很多开发者会出现: 从菜单栏点击跳转到页面时出现白屏或者授权完成重定向出现白屏. 大致导致白屏的 ...
解决安卓微信浏览器中location.reload 或者 location.href失效的问题
解决安卓微信浏览器中location.reload 或者 location.href失效的问题参考文章: (1)解决安卓微信浏览器中location.reload 或者 location.href失 ...
微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
苹果下微信浏览器返回上一页不刷新问题解决方案
苹果下微信浏览器返回上一页不刷新问题解决方案参考文章: (1)苹果下微信浏览器返回上一页不刷新问题解决方案 (2)https://www.cnblogs.com/liuxiaojie/p/78325 ...
安卓微信浏览器使用input file图片上传无法触发change事件
问题现象项目中遇到一个上传图片的功能,使用了file作为选择上传,需要做图片预览等功能.在多方测试后没有问题,但在安卓微信浏览器中却发现change事件失效无法触发. 解决办法由于在项目中我是用来 ...

H5在安卓微信浏览器返回时动态获取的数据不会保留（页面刷新了数据初始化了）

H5在安卓微信浏览器返回时动态获取的数据不会保留（页面刷新了数据初始化了）相关推荐

最新文章

热门文章