情境一：
如下所示功能说明：进入页面默认是选中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.onload=function(){
if(window.name!="hasLoad"){
location.reload();
window.name="hasLoad";
}
else{
window.name="";
}
}
ps:可能有延时，因为页面会先解析其他内容（针对以上情景可以不强制页面刷新，直接在页面加载的时候进行一写代码的处理即可，如上面情况可在页面加载的时候检查输入框有没有内容，若有则直接将上面选中的默认100去掉选中，并将需支付金额改为输入框内的金额）
window.onload=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_historybackprevhttps://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事件