解决动态生成的网页在微信浏览器中每次返回都会重新生成的问题

Posted 2022-11-07 ReedSun

解决动态网页在微信浏览器中每次返回都会重新加载的问题

前言

假设我们我们有一个搜索结果列表页面，其内容为我们通过 AJAX 从后端动态获取的。搜索页面中的每一个条目是一个超链接，我们可以点击超链接去请求另一个网页查看条目详情。这是一种很常见的情况。可是在微信浏览器，我们会遇到这样一个问题：当我们想从条目详情返回条目列表页面时，微信浏览器会重新刷新条目列表页面，我们会找不到刚才浏览的位置，又要重新滚动，上滑加载，等等等等，过了好久才能找到刚才浏览的位置，继续浏览。

这个问题的本质原因是微信浏览器的后退功能并不会保存网页快照，而是简单粗暴的重新加载网页。

这是一个很影响用户体验的问题。有解决办法吗？

当然有，最好的解决办法就是做一个 SPA 单页应用来实现。但是如果我们的网页已经存在，再重新成单页应用会增加很多工作量怎么办呢？这篇文章将介绍通过缓存来实现记录原有位置的功能。

思路

既然微信浏览器的后退功能我们无法修改，那我们的思路可以是自己保存网页的信息，当我们重新加载时先进行判断，判断本地是否有缓存的网页信息，如果有，则读取网页信息，将网页复原的原位置。如果没有，则像之前那样向后台发送 AJAX 来获取数据。

这样我们将大问题分解成了这几个小问题

• 如果缓存数据

• 什么时候缓存数据

• 缓存哪些数据

• 如何判断复原网页

　如何缓存数据

我这里的想法是使用 LocalStorge 来存储数据。 LocalStorge 只能存储字符串数据，如果我们的数据不是字符串，我们可以将其转换为 JSON 格式在存储。

// data 是我们要缓存的数据
localStorge.setItem('listData', JSON.strinify(data))

什么时候缓存参数

我这里的想法是在我们点击查看商品详情之前，先进行缓存，然后进行跳转。这时我们就不能使用 <a href="xxx"> 了，而要使用 window.location.href 来做跳转

// .list-item 是我们点击跳转的列表条目
let item = document.getElementByClassName('.list-item')
item.addEventListener('click', function () 
  localStorge.setItem('listData', JSON.strinify(data))
  window.loaction.href = 'xxx'
)

缓存哪些数据

我这里的想法是要缓存从后端获取的全部数据，key值（我这里是搜索关键字），滚动位置，如果我们是按页码加载的话还要缓存页码位置以便回到列表页浏览后继续加载。

let item = document.getElementByClassName('.list-item')
item.addEventListener('click', function () 
  var data = 
    data: response,  // 从后台获取的数据
    key: key
    scrollTop: document.body.scrollTop,
    page: page
  
  localStorge.setItem('listData', JSON.strinify(data))
  window.loaction.href = 'xxx'
)

　如何判断复原网页

关于如何判断数据这个就比较业务化了，大体思路还是按照key进行判断。复原网页就比较简单了，判断通过之后，将data数据渲染到 html 上，将滚动距离重新赋值给 document.body.scrollTop 即可。

如果判断不通过则可以通过如下方式删除缓存，然后重新获取数据即可。

localStorge.removeItem('listData')