[Web] HTML5新特性history pushState/replaceState解决浏览器刷新缓存

转载: https://www.jianshu.com/p/cf63a1fabc86

现实开发中,例如‘商品列表页’跳转‘商品详情页’,返回时,不重新加载刷新页面,并且滚动到原来的位置。
1.首先,先了解一下pushStatereplaceState

参数(params) 功能说明
state 存储JSON字符串,可以用在popstate事件中,可以通过location.state获取
title 现在大多数浏览器不支持或者忽略这个参数,最好用null代替
url 任意有效的URL,用于更新浏览器的地址栏,并不在乎URL是否已经存在地址列表中。更重要的是,它不会重新加载页面
  • 相同点:(1)共同的参数,(2)不会重新加载页面。*
  • 不同点:pushState会在history栈中添加一个新的记录(在开发体验中,会出现怪异的现象,需要返回2次才能真正回到原来的页面);
    replace不会添加新的history栈记录,而是替换当前的url(推荐使用)。

2.开始解决浏览器刷新问题(例如安卓微信浏览器强制刷新)。

  • 还可能应用的场景:例如登录成功后,我们不希望返回的时候还能返回到登录页面。
//1.页面加载完毕时,判断history.state
if (history.state == null) {
//第一次进入页面,需要加载
loadPage()
} else {
//存在状态,获取缓存数据,(当页面使用pushState/replaceState,并且设置参数state,则此时state 不为空,因为页面不会重新加载,所以当返回/刷新时才体现)
}
//2.点击商品,进行跳转前,先设置replaceState,
var state = {
loadNum: loadNum,//上一次加载的个数
pid: pid,//页码
scrollTop: scrollTop,//滚动位置
data: stateData,//json数据
//url: "#",
};
var qs = new Array();//url参数
window.history.replaceState(state, "", "?" + qs.join("&"));//只添加参数时,默认还是当前页面html //或者只判断state,json数据用loacalstroage存储

  

上一篇:iOS 内存泄漏监测自动化


下一篇:Ajax异步刷新地址栏url改变(利用Html5 history.pushState实现)