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