移动端返回后页面刷新

学习参考：
https://blog.csdn.net/qq_35430000/article/details/109098866?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link

移动端返回刷新

手机端返回后页面不刷新，一些失效的信息依然显示在页面上。这个问题在iphone手机上会出现，在Android手机上返回时会自动刷新，为了解决这个问题，可以用pageshow方法。

onpageshow 事件在用户浏览网页时触发。
onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发，此外还有pagehide在不显示的时候触发。

1. 根据persisted 属性来判断

为了查看页面是直接从服务器上载入还是从缓存中读取，可以使用 PageTransitionEvent 对象的 persisted 属性来判断。

window.onpageshow = function(event) {
if (event.persisted) {
    window.location.reload();
}
}

window.addEventListener('pageshow', function(event) {
    console.log("PageShow Event " + event.persisted);
    console.log(event)
    if (event.persisted) {
        window.location.reload();
    }
})

2. 根据数据是否变化来判断

如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false。然后在根据true或false在执行相应的页面刷新动作或者直接ajax请求接口更新数据。这一点有个缺陷就是，无论是不是需要更新数据这个页面都会刷新，我们要做的只是数据变化了才需要更新。于是想到另一个办法在可能会出现数据变化的页面设置缓存，即为只要页面数据变化了就写缓存一条记录，在返回页面后检测到这条记录就说明需要页面刷新或调用接口刷新。

处理方法为：

// a.html 设置刷新 检测缓存是否有标志 要是有就说明数据有变化 a.html跳转到b.html页面
window.addEventListener("pageshow", function(){
    if(sessionStorage.getItem("need-refresh")){
        location.reload();
        sessionStorage.removeItem("need-refresh");
    }
});
// b.html 如果是数据变化了就写一条缓存 b.html返回到a.html页面
sessionStorage.setItem("need-refresh", true);

3. 根据performance.navigation.type属性来判断

最近在项目中使用pageshow，发现页面返回的时候persisted依然为false，这时候只好找其他方案解决。 这时候发现有一个window.performance对象，performance.navigation.type是一个无符号短整型

• TYPE_NAVIGATE (0)：
  当前页面是通过点击链接，书签和表单提交，或者脚本操作，或者在url中直接输入地址，type值为0
• TYPE_RELOAD (1)
  点击刷新页面按钮或者通过Location.reload()方法显示的页面，type值为1
• TYPE_BACK_FORWARD (2)
  页面通过历史记录和前进后退访问时。type值为2
• TYPE_RESERVED (255)
  任何其他方式，type值为255 这真是我们需要的部分，于是可以预见，解决方案如下：

window.addEventListener('pageshow', () => {
    if (e.persisted || (window.performance &&window.performance.navigation.type == 2)) {
        location.reload()
    }
}, false)