一：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登录中的使用
<template>
<div class="login-wrap">
<div class="ms-login">
<div class="ms-title">后台管理系统</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="请输入用户名">
<el-button slot="prepend"><i class="el-icon-user"></i></el-button>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
placeholder="请输入密码"
v-model="ruleForm.password"
@keyup.enter.native="submitForm('ruleForm')"
>
<el-button slot="prepend"><i class="el-icon-lock"></i></el-button>
</el-input>
</el-form-item>
<!-- `checked` 为 true 或 false -->
<el-checkbox v-model="checked">记住密码</el-checkbox>
<br>
<br>
<!-- `checked` 为 true 或 false -->
<div class="login-btn">
<el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">登录</el-button>
</div>
</el-form>
</div>
</div>
</template>//页面加载调用获取cookie值
data(){
return{
checked: true,
}
}
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天就好了
}<style scoped>
.login-wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url(../../assets/img/login-bg.jpg);
background-size: 100%;
}
.ms-title {
width: 100%;
line-height: 50px;
text-align: center;
font-size: 20px;
color: #fff;
border-bottom: 1px solid #ddd;
}
.ms-login {
position: absolute;
left: 50%;
top: 50%;
width: 350px;
margin: -190px 0 0 -175px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.3);
overflow: hidden;
}
.ms-content {
padding: 30px 30px;
}
.login-btn {
text-align: center;
}
.login-btn button {
width: 100%;
height: 36px;
margin-bottom: 10px;
}
.login-tips {
font-size: 12px;
line-height: 30px;
color: #fff;
}
</style>
