<a href="javascript:history.go(-1);location.replace(document.referrer);" class="fanhui">

这篇文章主要介绍了pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新的相关资料,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
使用Ajax可以异步获取数据，可以更高效地渲染页面。
但也存在这一些问题：
再刷新页面，页面就会变成初始的状态
浏览器的前进后退功能无效
对搜索引擎的爬虫抓取不友好
1、
早前会使用浏览器的 hash锚点 来解决
不同的hash标记着页面不同的部分，能修正页面刷新数据不正确的问题
再通过 onhashchange 事件监听hash锚点的变化，手动进行前进后退操作，浏览器支持度
2、
随后出现一种 hashbang 的技术，即在url后加上标记 #!/myPath 来解决上述的问题
通过一个路径定义一个页面部分，在单页面应用中可常见到(Angular中已经封装了)。但好像只有google真正支持了对该路径的爬取
3、
HTML5的新特性做了助力，通过pushState、replaceState 这两个新的history方法和 onpopstate 这个window事件，解决了上述三个问题
当然，也因为是HTML5的新特性，在旧版本浏览器上支持度不好的，建议是再用hashbang的方法来兼容
本文主要讲讲pushState这几个新东西
文字太枯燥了，先看看图示直接点感受
这个栗子目的是：初始值为0，通过异步请求自增值，可以前进或后退以及刷新，新打开一个url后也能获取相应的数据history.pushState(state, title, url)
history.replaceState(state, title, url)
其中state是个json对象，可以自定义存放一些数据，title即是这个url对应的标签title(不过好像浏览器都忽略了这个参数)
url是某个页面的标记url(操作只会改变地址栏的url，并不会立马加载这个url，可以简单的标记 ?w=a、ajaxPage.html/w=a、&w=a，只是一种标记，取值时对照着来就行)
replaceState和pushState的不同是：前者直接替换当前值，后者就是向栈中压入一个值
window.onpopstate 事件触发之后，可以通过 history.state获取到上述方法的第一个json对象
实现部分
HTML
value: 0
JSvar $val = $('#ajax-test-val'),
// 获取当前页面的标记
m = window.location.search.match(/\?val=(\d+)/);
// 新进入页面，通过url中的标记初始化数据
if (m) {
increaseVal(m[1] - 1);
}
// 请求
function increaseVal(val) {
$.post('ajax-test.php', {
val: val
}, function(newVal) {
$val.text(newVal);
// 存储相关值至对象中
var state = {
val: newVal,
title: 'title-' + newVal,
url: '?val=' + newVal
}
// 将相关值压入history栈中
window.history.pushState && window.history.pushState(state, state.title, state.url);
});
}
$('#ajax-test-btn').click(function() {
increaseVal(parseInt($val.text(), 10));
});
// 浏览器的前进后退，触发popstate事件
window.onpopstate = function() {
var state = window.history.state;
console.log(state)
// 直接将值取出，或再次发个ajax请求
$val.text(state.val);
window.history.replaceState && window.history.replaceState(state, state.title, state.url);
};
PHP<?php 
$val = $_REQUEST['val'];
echo $val + 1;
?>
这里通过?val=num 的方式，标记了不同的ajax结果页
Tips:
使用pushState之后，当前进后退触发了popstate事件，获取到相应的json对象
json对象的数据可自定义
可简单地存储相关标记再发个请求，或者直接将该标记页对应的结果直接存起来
随着后退操作，地址栏url得到了更新，异步的数据也得到了更新
刷新页面或新打开页面，就要根据url中的标记去请求数据了
要记住的是，浏览器并不会自动加载url这部分标记对应的这个异步内容页，需要我们去获取
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：

情境一：
如下所示功能说明：进入页面默认是选中100元的购买1个礼包的按钮，用户可以选择上面提供的购买金额按钮，也可以自定义购买金额，需支付随着输入框或用户选择的支付金额变化而变化的，主要以输入框内容为主，输入框为空时取上面选中的金额，存在情况：本页面默认是选中100元购买1个礼包，需支付金额此时默认为100元，但当用户输入金额后，上面无选中状态且需支付金额为输入框内的输入金额，这是如点击支付按钮去支付后，用户不想支付了或想重新设置金额即又回退到了该页面，此时上面提供的可选按钮中又恢复了默认的100元的选中状态且需支付金额也是默认的100元，但是输入框内确是缓存的用户输入的金额，这种情况与原业务流程不一致，且需支付金额也不对，虽然在点击支付的时候可以处理回来，但是用户不点击支付这种效果是有问题的。（测试过：andriod手机这样，IOS正常)
 



解决方案：回退刷新
1.HTML头部，禁止缓存：

<meta http-equiv="Expires" CONTENT="0">

<meta http-equiv="Cache-Control" CONTENT="no-cache">

<meta http-equiv="Pragma" CONTENT="no-cache">
注：（手机端）此方法行不通，因为有些浏览器会忽略这个头部，测试过。



2.强行刷新界面

if(window.name != "bencalie"){
location.reload();
window.name = "bencalie";
}else{
window.name = "";
}


window.οnlοad=function(){ 
if(window.name!="hasLoad"){ 
location.reload(); 
window.name="hasLoad";
 }
else{ 
window.name=""; 
} 
}

ps:可能有延时，因为页面会先解析其他内容（针对以上情景可以不强制页面刷新，直接在页面加载的时候进行一写代码的处理即可，如上面情况可在页面加载的时候检查输入框有没有内容，若有则直接将上面选中的默认100去掉选中，并将需支付金额改为输入框内的金额）

window.οnlοad=function(){ 
var user_input = +$("#user_input_money").val();
if(user_input > 0)
{
$(".active").removeClass("active");
$(".need-money").text(user_input);
}

}



3.php处理:
header("Cache-Control:no-store,no-cache,must-revalidate");
 header("Cache-Control:post-check=0,pre-check=0",false); header("Pragma:no-cache");



情景2：
保留页面跳转之前的状态：https://www.zhihu.com/question/29403931
页面有很多标题列表，点开对应标题会展开相应的内容，默认是展开第一个，但是若用户点开了除了默认之外的其他的，有点击查看文章详情，则会跳转到我文章详情页，用户浏览网回退希望页面上展开的还是之前查看的那篇




解决：页面回退无刷新history：history.pushState方法、popstate事件以及hashchange


history.state


当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的，那么history.state是null。

history.pushState(state, title, url)

将当前URL和history.state加入到history中，并用新的state和URL替换当前。不会造成页面刷新。
state：与要跳转到的URL对应的状态信息。

title：页面的题目,假如没有就穿空字符串就可以。

url：要跳转到的URL地址，不能跨域。

history.replaceState

用新的state和URL替换当前。不会造成页面刷新。
state：与要跳转到的URL对应的状态信息。

title：页面的题目,假如没有就穿空字符串就可以。

url：要跳转到的URL地址，不能跨域。

window.onpopstate

history.go和history.back（包括用户按浏览器历史前进后退按钮）触发，并且页面无刷的时候（由于使用pushState修改了history）会触发popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。
http://www.haorooms.com/post/ajax_historybackprev
https://liushaozhen.github.io/2017/07/03/js%20%E7%9B%91%E5%90%AC%E6%B5%8F%E8%A7%88%E5%99%A8%E5%90%8E%E9%80%80%E4%BA%8B%E4%BB%B6/



小问题


当我们每次点击，都会存一个pushState，当我们列表返回的时候，我们期望的效果是列表的上一次记录。那么我们用：
  window.history.replaceState({"html": datahtml, pageTitle: titlehtml, id: id}, "", lurl);

每次都对历史进行替换，而不是创建。就可以实现我们想要的效果！







浏览器实现了onbeforeunload和onunload事件，onbeforeonload事件是在浏览器即将请求下一个页面（请求还未发出）的时候触发，它可以实现阻止onunload的触发。onunload事件则是浏览器已经将下一个页面请求回来，页面即将跳转的时候触发，该事件无法中断。看起来onbeforeunload事件似乎能满足我们的需求，但是，这只是一个假象。

onbeforeunload事件虽然能阻止onunload事件的触发，但是由于它是浏览器内置的事件，其出现的交互方式和UI界面，均由浏览器厂商控制，并未提供给开发者定义浮层内部内容更多交互的接口，甚至文本性质的提示内容也无法设置样式。所以，想要通过onbeforeunload事件提供的浮层实现收集用户离开的原因或让用户给应用打分的功能并不现实。

在进入主题之前，我们先来罗列几个小知识点：
浏览器离开一个页面，意味着链接地址（不含hashchange、pushState方式）发生变化
history.pushState可以改变地址栏链接地址，但不触发页面刷新（不离开）
hash变化会触发popstate事件和hashchange事件
popstate事件对象可以获得pushState传递进去的state属性，从而得到变化后的链接地址等
hashchange事件对象中包含变化前后的链接地址（oldURL和newURL）
浏览器的“前进”、“后退”可以触发hashchange事件

版本：Angular 1.5.3、Ionic1.3.2
一 禁用缓存，全页面刷新。
每次前进/ 后退时，控制器都会执行。
1 AngularJS ui-router路由禁用缓存

var app = angular.module('myApp',['ionic']);
app.config(function($stateProvider,$urlRouterProvider){
    $stateProvider
        .state('index',{
            url:'/index',
            cache : false,
            templateUrl:'template/index.html',
            controller:'indexCtrl'
        })
        $urlRouterProvider.otherwise('/index');
});    

2 Ionic view禁用缓存 

<ion-view title="index" cache-view="false">
    <ion-content>
        ...
    </ion-content>
</ion-view>

3 Ionic 全局禁用缓存

var app = angular.module('myApp',['ionic']);
app.config(function($stateProvider,$urlRouterProvider,$ionicConfigProvider){
    $ionicConfigProvider.views.maxCache(0);
});

二 局部刷新
前进到页面，控制器执行；后退到页面，控制器不执行。

(function(angular){
    angular.module('myApp')
        .controller('indexCtrl',function($scope){
            $scope.$on('$ionicView.beforeEnter',function(event,view){
                $scope.refreshData(); // 自定义刷新方法
            });
        });
})(angular);