浏览器后退刷新(通过浏览器按钮)
2015-07-10 13:34
357 查看
以前做了一个手机端电商的项目,其中遇到一个问题就是浏览器后退问题,为了保证数据的及时准确,需要一个浏览器后退后之后自动刷新后退到的页面,保证页面数据的准确性。(可能数据已经被下一步修改掉了)。
需求如下:
1.html进行一系列操作之后跳转到2.html,当用户通过浏览器回退到1.html的时候,1.html需要自动刷新以便数据准确。
经过研究,发现可以通过cookie设置一个标志位来实现,具体原理如下:
1.html:判断标志位是否是false,如果是false不刷新,继续后边的代码,如果是true,那么设置为false后刷新当前页面。
2.html:设置标志位为true。
具体代码如下:
1.html:
2.html
这样就实现了后退刷新了。
需求如下:
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>
这样就实现了后退刷新了。
相关文章推荐
- leetcode7 Rerver Integer
- 【高斯消元】BZOJ 1770: [Usaco2009 Nov]lights 燈
- Mac客户端CentOS服务器 SSH免密码登陆
- cloudera CDH(5)开发方式及CDH eclipse插件编译总结
- vs2010 调试多进程
- 外贸的营销高手的经典方法:EDM营销
- GRE写作必备句型
- 关于Go语言,自定义结构体标签的一个妙用.
- 红米note电信版root
- Eclipse+Tomcat下配置JSTL
- 【高斯消元】Poj 1222:EXTENDED LIGHTS OUT
- 今天我想结束菜鸟的生活
- Log4j的AppenderSkeleton
- socket套接字编程
- vs2010 一个解决方案 多个项目 调试
- 算法 《霍纳的方法java实践》
- 【Java】设计一个栈,并且push,pop和min三个方法的时间复杂度必须为O(1)
- Laravel 操作
- mac电脑开发android找不到设备
- 求二进制数中1的个数