浏览器后退刷新(通过浏览器按钮)

以前做了一个手机端电商的项目，其中遇到一个问题就是浏览器后退问题，为了保证数据的及时准确，需要一个浏览器后退后之后自动刷新后退到的页面，保证页面数据的准确性。（可能数据已经被下一步修改掉了）。

需求如下：

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>

这样就实现了后退刷新了。

posted @ 2015-07-10 13:34  定海神针  阅读(1160)  评论(0)  编辑  收藏  举报