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

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

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

参数(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存储