vue 登录页面使用Cookie记住用户名和密码

一:Cookie 基础知识
1,cookie 是有大小限制的,大多数浏览器支持最大为 4096 字节(大约4M)的 Cookie,如果 cookie 字符串的长度超过最大限制,则该属性将返回空字符串。

2,由于 cookie 最终都是以文件形式存放在客户端计算机中,所以查看和修改 cookie 都是很方便的,这就是为什么常说 cookie 不能存放重要信息的原因。
3,每个 cookie 的格式都是这样的:cookieName = Value;名称和值都必须是合法的标示符。

4,cookie 是存在 有效期的。在默认情况下,一个 cookie 的生命周期就是在浏览器关闭的时候结束。如果想要 cookie 能在浏览器关掉之后还可以使用,就必须要为该 cookie 设置有效期,也就是 cookie 的失效日期。
5,alert(typeof document.cookie)结果是 string.
6,cookie 有域和路径这个概念。域就是domain的概念,因为浏览器是个注意安全的环境,所以不同的域之间是不能互相访问 cookie 的(当然可以通过特殊设置的达到 cookie 跨域访问)。路径就是routing的概念,一个网页所创建的 cookie 只能被与这个网页在同一目录或子目录下得所有网页访问,而不能被其他目录下得网页访问(这句话有点绕,一会看个例子就好理解了)。

7,其实创建cookie的方式和定义变量的方式有些相似,都需要使用 cookie 名称和 cookie 值。同个网站可以创建多个 cookie ,而多个 cookie 可以存放在同一个cookie 文件中。
8,cookie 存在两种类型:①:你浏览的当前网站本身设置的 cookie ②来自在网页上嵌入广告或图片等其他域来源的 第三方 cookie (网站可通过使用这些 cookie 跟踪你的使用信息)

9,cookie 有两种清除方式:①:通过浏览器工具清除 cookie (有第三方的工具,浏览器自身也有这种功能) ②通过设置 cookie 的有效期来清除 cookie.注:删除 cookie 有时可能导致某些网页无法正常运行。
,10,浏览器可以通过设置来接受和拒绝访问 cookie。出于功能和性能的原因考虑,建议尽量降低 cookie 的使用数量,并且要尽量使用小 cookie。

二:简单属性介绍
1,cookie是创建于服务器端

2,cookie保存在浏览器端

3,cookie的生命周期可以通过cookie.setMaxAge(2000);来设置,如果没有设置setMaxAge,则cookie的生命周期当浏览器关闭的时候,就消亡了

4,cookie可以被多个同类型的浏览器共享 可以把cookie想象成一张表

三: 设置cookie的存活时间
1,cookie.setMaxAge(60*60):表示cookie对象可存活1小时。就算关闭浏览器,就算重启客户端电脑,cookie也会存活1小时。因为当maxAge大于0时,浏览器不仅会把cookie保存在浏览器内存中,还会把cookie保存到硬盘上。

2,cookie.setMaxAge(-1):cookie的maxAge属性的默认值就是-1(其实只要是负数都是一个意思),表示只在浏览器内存中存活。一旦关闭浏览器窗口,那么cookie就会消失。

3,cookie.setMaxAge(0):cookie被作废!表示cookie即不在内存中存活,也不在硬盘上存活,这样的cookie设置只有一个目的,那就是覆盖客户端原来的这个cookie,使其作废。

四:cookie在Vue登录中的使用

//页面加载调用获取cookie值
    mounted() {
        this.getCookie();
    },
    methods: {
        submitForm(formName) {
                         const  _this = this;
                        //判断复选框是否被勾选 勾选则调用配置cookie方法
                        if (_this.checked == true) {
                            console.log("checked == true");
                            //传入账号名,密码,和保存天数3个参数
                            _this.setCookie(_this.ruleForm.username, _this.ruleForm.password, 7);
                        }else {
                          console.log("清空Cookie");
                          //清空Cookie
                          _this.clearCookie();
                        }

                        //与后端请求代码,本功能不需要与后台交互所以省略

                        console.log("登陆成功");

                });
            },
            //设置cookie
            setCookie(c_name, c_pwd, exdays) {
                var exdate = new Date(); //获取时间
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
                //字符串拼接cookie
                window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
                window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
            },
            //读取cookie
            getCookie: function() {
                if (document.cookie.length > 0) {
                    var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
                    for (var i = 0; i < arr.length; i++) {
                        var arr2 = arr[i].split('='); //再次切割
                        //判断查找相对应的值
                        if (arr2[0] == 'userName') {
                            this.ruleForm.username = arr2[1]; //保存到保存数据的地方
                        } else if (arr2[0] == 'userPwd') {
                            this.ruleForm.password = arr2[1];
                        }
                    }
                }
            },
            //清除cookie
            clearCookie: function() {
                this.setCookie("", "", -1); //修改2值都为空,天数为负1天就好了
            }

猜你喜欢

转载自blog.csdn.net/LONGLONGAGO_RU/article/details/84614600