以前做了一个手机端电商的项目,其中遇到一个问题就是浏览器后退问题,为了保证数据的及时准确,需要一个浏览器后退后之后自动刷新后退到的页面,保证页面数据的准确性。(可能数据已经被下一步修改掉了)。
需求如下:
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-09-29 21:54:35