怎样让用户点击浏览器后退按钮刷新后退页面的验证码

介绍

项目需要，怎样让用户点击浏览器后退按钮刷新后退页面的验证码，通过cookie来解决

方法一（通过设置前台html）（失败）

本想通过控制html的http-equiv属性来解决问题，如下

http-equiv属性 
1、＜meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80"＞ 
和 ＜meta http-equiv="Content-Language" contect="zh-CN"＞用以说明主页制作所使用的文字以及语 

言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集； 
2、＜meta http-equiv="Refresh" contect="n;url=http://yourlink"＞定时让网页在指定的时间n内， 

跳转到页面http;//yourlink； 
3、＜meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT"＞可以用于设定网页的到 

期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式； 
4、＜meta http-equiv="Pragma" contect="no-cache"＞是用于设定禁止浏览器从本地机的缓存中调阅 

页面内容，设定后一旦离开网页就无法从Cache中再调出； 
5、＜meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT"＞cookie设定，如果 

网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式； 
6、＜meta http-equiv="Pics-label" contect=""＞网页等级评定，在IE的internet选项中有一项内容 

设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的； 
7、＜meta http-equiv="windows-Target" contect="_top"＞强制页面在当前窗口中以独立页面显示， 

可以防止自己的网页被别人当作一个frame页调用； 
8、＜meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)"＞和＜ 

meta http-equiv="Page-Exit" contect="revealTrans(duration=20，transtion =6)"＞设定进入和离 

开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。

<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache"> 

方法二（通过设置后台controller）（失败）

本想通过控制response的setHeader方法来解决问题，如下
复制代码

@RequestMapping(value = "login", method = RequestMethod.GET)
public String login(HttpServletRequest request,
                    HttpServletResponse response,
                    Model model) throws IOException {
    Object params = request.getSession().getAttribute("params");
    if (params != null) model.addAttribute("message", params);
    response.setHeader("Pragma", "No-cache");
    response.setHeader("Cache-Control","no-cache");
    response.setDateHeader("Expires", -10);
    return "login";
}

复制代码

结论：点击浏览器的后退按钮，压根就没再从后台返回新的数据，依旧从浏览器的缓冲中读取
方法三（通过前台javacript设置cookie）（成功）

目标页面 js login.js
复制代码

var Cookie = {
            // 设置Cookie
            setCookie: function(name, value, expires, path, domain){
                document.cookie = name + "=" + escape( value ) +
                    ( ( expires ) ? ";expires=" + expires.toGMTString() : "" ) +
                    ( ( path ) ? ";path=" + path : "" ) +
                    ( ( domain ) ? ";domain=" + domain : "" );
            },
            // 获取Cookie
            getCookie: function( name ){
                var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
                if(arr != null) return unescape(arr[2]); return null;
            },
            // 删除Cookie
            delCookie: function( name ){
                var d = new Date();
                d.setTime(d.getTime() - 3600 * 1000);
                this.setCookie(name, "", d);
            }
        }
console.log(Cookie.getCookie("a"));
if (Cookie.getCookie("a") != 1){
   Cookie.setCookie("a",1);
   console.log(Cookie.getCookie("a"));
   window.location.reload();
}

复制代码

目标页面下一页 js
复制代码

    var Cookie = {
        // 设置Cookie
        setCookie: function(name, value, expires, path, domain){
            document.cookie = name + "=" + escape( value ) +
                    ( ( expires ) ? ";expires=" + expires.toGMTString() : "" ) +
                    ( ( path ) ? ";path=" + path : "" ) +
                    ( ( domain ) ? ";domain=" + domain : "" );
        },
        // 获取Cookie
        getCookie: function( name ){
            var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
            if(arr != null) return unescape(arr[2]); return null;
        },
        // 删除Cookie
        delCookie: function( name ){
            var d = new Date();
            d.setTime(d.getTime() - 3600 * 1000);
            this.setCookie(name, "", d);
        }
    }
    Cookie.setCookie("a",2);

复制代码

总结:通过cookie跨页面保存变量的功能，判断同一变量在不同页面设置的值来达到区分的目的