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

Holly1945

已于 2022-04-02 16:56:43 修改

阅读量1.1k

点赞数

分类专栏： h5 文章标签： javascript

于 2022-04-02 15:26:26 首次发布

本文链接：https://blog.youkuaiyun.com/Holly1945/article/details/123921268

版权

h5 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了一个JavaScript函数，用于处理微信安卓版浏览器中页面刷新时动态数据不丢失的问题。通过在`sessionStorage`中缓存页面内容，在页面加载时恢复，实现数据持久化。但这种方法限制了窗口刷新功能，导致页面无法正常刷新获取最新数据，只能通过关闭再打开来更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决思路：
判断机型
跳转前将动态构建的页面内容缓存在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).innerHTML
      if(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>