以前做了一个手机端电商的项目，其中遇到一个问题就是浏览器后退问题，为了保证数据的及时准确，需要一个浏览器后退后之后自动刷新后退到的页面，保证页面数据的准确性。（可能数据已经被下一步修改掉了）。
需求如下：
1.html进行一系列操作之后跳转到2.html，当用户通过浏览器回退到1.html的时候，1.html需要自动刷新以便数据准确。
经过研究，发现可以通过cookie设置一个标志位来实现，具体原理如下：
1.html：判断标志位是否是false，如果是false不刷新，继续后边的代码，如果是true，那么设置为false后刷新当前页面。
2.html：设置标志位为true。
具体代码如下：
1.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1" />
<title>浏览器后退刷新</title>
<style type="text/css">
body {}
</style>
</head>
<body>
<h1>浏览器后退刷新1.html</h1>
<script>
function getCookie(c_name){
if (document.cookie.length>0){ //先查询cookie是否为空，为空就return ""
c_start=document.cookie.indexOf(c_name + "="); //通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1
if (c_start!=-1){
c_start=c_start + c_name.length+1 //最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置
c_end=document.cookie.indexOf(";",c_start); //其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end)); //通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节
}
}
return "";
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
switch(getCookie("htmlMustReload")) {
case "": //如果没有那么建立cookie
alert("设置cookie");
setCookie("htmlMustReload",false,99999);
break;
case "true": //如果设置为true，那么设置为false并重载
alert("重新设置cookie为false,并刷新");
setCookie("htmlMustReload",false,99999);
window.reload();
break;
default:
alert("啥也没干");
break;
}
</script>
<a href="2.html">跳转到2.html</a>
</body>
</html>
2.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1" />
<title>浏览器后退刷新2.html</title>
<style type="text/css">
body {}
</style>
</head>
<body>
<h1>浏览器后退刷新2.html，按下浏览器回退按钮会回退到1.html，并刷新1.html</h1>
<script>
function getCookie(c_name){
if (document.cookie.length>0){ //先查询cookie是否为空，为空就return ""
c_start=document.cookie.indexOf(c_name + "="); //通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1
if (c_start!=-1){
c_start=c_start + c_name.length+1 //最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置
c_end=document.cookie.indexOf(";",c_start); //其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end)); //通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节
}
}
return "";
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
switch(getCookie("htmlMustReload")) {
case "": //如果没有那么建立cookie并设置为true
alert("设置cookie");
setCookie("htmlMustReload",true,99999);
break;
case "false": //如果设置为false，那么设置为true
alert("重新设置cookie为true,表示回退要刷新");
setCookie("htmlMustReload",true,99999);
break;
default:
break;
}
</script>
</body>
</html>
这样就实现了后退刷新了。
时间： 2024-07-29 22:24:52