Web前端数据存储—cookie机制（设置，获取，删除cookie）
今天看到cookie机制就来记录一下，我们前端一般存储cookie都是在登录的时候进行的，两种，选一个就行(其实都一样，只不过一个明细化了)。我们先了解一下cookie:HTTPCookie，通常叫做cookie，是用于客户端存储会话信息的。例如平常我们使用的浏览器保存某个网页的登陆用户名，是浏览器提供的一种机制，交由javascript处理cookie，即BOM的document.cookie属
·
今天看到cookie机制就来记录一下，我们前端一般存储cookie都是在登录的时候进行的，两种，选一个就行(其实都一样，只不过一个明细化了)。
我们先了解一下
cookie:
HTTPCookie，通常叫做cookie，是用于客户端存储会话信息的。
例如平常我们使用的浏览器保存某个网页的登陆用户名，是浏览器提供的一种机制，交由javascript处理cookie，即BOM的document.cookie属性；
Cookie在性质上是绑定在特定的域名下，当设定一个cookie后，再给创建它的域名发送请求时，都会包含这个cookie。
这个限制确保cookie只能让批准的接受者访问，而无法被其它域访问。
每个域的cookie总数是有限的，不过浏览器之间各有不同。
火狐限制50个，
IE7和之后的版本都是50个，
safari和chrome对于每个域的cookie数量限制没有硬性规定。
一、Cookie的构成：
名称：cookie的名称，不区分大小写；
值：存储在cookie中的字符串，必须被URL编码；
域：cookie对于哪个域是有效的，如果没有明确确定，那么这个域会被认作来自设置cookie的那个域。
路径：指定域中的那个路径应该向服务器发送cookie；
例如：设置http://www.wrox.com/books才能访问，
那么即使同一域名下的http://www.wrox.com的页面就不会发送cookie信息，即使请求都是来自同一域名下的。
删除时间：用于删除cookie的准确时间，这个值是个GMT格式的日期（Wdy,DD-Mon-YYYY HH:MM:SS GMT）
安全标志：指定后，cookie只有在使用SSL连接的时候菜发送到服务器。例如只能用https而不能用http发送。
二、javascript处理cookie
Cookie格式：
Document.cookie = name = value;
expires = expiration_time;
path = domain_path;
domain = domain_name; 只有名字和值键值对是必须的
例如：把 name = sss, 时间1天，域名为www.baidu.com,
路径为www.baidu.com/books;
Document.cookie = " name = sss ";
expires = (Date.getDate()+1243600*1000).toGMTString();
domain = www.baidu.com;
path = “www.baidu.com/books”;
这样的读写很不直观，一般会写些函数来简化cookie的功能；基本的三种操作：设置，读取，删除。
第一种
<script>
var cookieUtil={
/*设置cookie*/
set:function(name,value,expires,path,domain,secure){
var cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
if(expires instanceof Date){
cookie += "; expires=" + expires.toGMTString();
} else {
var date=new Date();
date.setTime(date.getTime() + expires*24*3600*1000);
cookie += "; expires=" + date.toGMTString();
}
if(path) {
cookie += "; path=" + path;
}
if(domain){
cookie += "; domain=" + domain;
}
if (secure) {
cookie += "; " + secure;
}
document.cookie = cookie;
},
/*获取cookie*/
get:function(name){
var cookieName = encodeURIComponent(name);
/*正则表达式获取cookie*/
var restr = "(^| )" + cookieName + "=([^;]*)(;|$)";
var reg = new RegExp(restr);
var cookieValue = document.cookie.match(reg)[2];
/*字符串截取cookie*/
/*
var cookieStart = document.cookie.indexOf(cookieName + “=”);
var cookieValue = null;
if(cookieStart>-1){
var cookieEnd = document.cookie.indexOf( ";" , cookieStart);
if(cookieEnd == -1){
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart
+ cookieName.length, cookieEnd));
}
*/
return cookieValue;
}
}
</script>
第二种
项目中登录时进行cookie 值 存 取。以element ui框架为例
<template>
<div class="login-container">
<img class="img" src="../../assets/images/AIO.png" alt="" />
<p class="login-title">能管后台系统</p>
<p class="login-word">backstage system</p>
<div class="login-content">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
autocomplete="on"
label-position="left"
>
<div class="title-container">
<p class="title">用户登录</p>
</div>
<el-form-item prop="username">
<span class="svg-container">登录名</span>
<el-input
ref="username"
v-model="loginForm.username"
placeholder="请输入账号/邮箱/手机号"
name="username"
type="text"
tabindex="1"
autocomplete="on"
/>
</el-form-item>
<el-tooltip
v-model="capsTooltip"
content="Caps lock is On"
placement="right"
manual
>
<el-form-item prop="password">
<span class="svg-container">密码</span>
<el-input
:key="passwordType"
ref="password"
v-model="loginForm.password"
:type="passwordType"
placeholder="请输入密码"
name="password"
tabindex="2"
autocomplete="on"
@keyup.native="checkCapslock"
@blur="capsTooltip = false"
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd"></span>
</el-form-item>
</el-tooltip>
<el-checkbox type="checkbox" v-model="loginForm.remember"
>记住密码</el-checkbox
>
<el-button
:loading="loading"
type="primary"
style="width:100%;margin-bottom:30px;"
@click.native.prevent="handleLogin"
>
登录</el-button
>
</el-form>
</div>
<message
:success="success"
:info="message"
:show="ismess"
@close="_closemess"
/>
</div>
</template>
<script>
const Base64 = require("js-base64").Base64;
import { login } from "@/api/login";
export default {
name: "Login",
data() {
/* checked: true; */
// 验证登录信息和密码信息是否有值
const validateUsername = (rule, value, callback) => {
if (value.length == 0) {
callback(new Error("登录账号不能为空！"));
} else {
callback();
}
};
const validatePassword = (rule, value, callback) => {
if (value.length == 0) {
callback(new Error("登录密码不能为空！"));
} else {
callback();
}
};
return {
loginForm: {
username: "",
password: "",
remember: ""
},
loginRules: {
username: [
{ required: true, trigger: "blur", validator: validateUsername }
],
password: [
{ required: true, trigger: "blur", validator: validatePassword }
]
},
checked: false,
passwordType: "password",
capsTooltip: false,
loading: false,
ismess: false,
message: "",
showDialog: false,
redirect: undefined,
otherQuery: {},
success: 1
};
},
// 创建完成之后加载的钩子函数
created() {
sessionStorage.clear()
//在页面加载时从cookie获取登录信息
let username = this.getCookie("username");
let password = Base64.decode(this.getCookie("password"));
// 如果存在赋值给表单，并且将记住密码勾选
if (username) {
this.loginForm.username = username;
this.loginForm.password = password;
this.loginForm.remember = true;
}
},
methods: {
checkCapslock(e) {
const { key } = e;
this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
},
showPwd() {
if (this.passwordType === "password") {
this.passwordType = "";
} else {
this.passwordType = "password";
}
this.$nextTick(() => {
this.$refs.password.focus();
});
},
// 登录
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
login(this.loginForm)
.then(res => {
if(res.code == 'SUCCESS'){
sessionStorage.setItem("id_token", res.data.id_token);
sessionStorage.setItem("username", res.data.name);
sessionStorage.setItem("userImgUrl", res.data.imgUrl);
this.$store.dispatch("setToken", res.data.id_token).then(() => {
this.$router.replace({ path: "/welcome" });
this.loading = false;
this.setUserInfo(); // 储存表单信息
});
}else{
this.loading = false;
this.ismess = true;
this.success = 3;
this.message = res.message;
}
})
.catch(err => {
this.loading = false;
this.ismess = true;
this.success = 3;
this.message = err.title;
});
} else {
return false;
}
});
},
_closemess() {
this.ismess = false;
},
// 储存表单信息,
setUserInfo() {
// 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，
// 如果没有勾选，储存的信息为空
if (this.loginForm.remember) {
// base64加密密码
let passWord = Base64.encode(this.loginForm.password);
this.setCookie(this.loginForm.username, passWord, 7);
} else {
this.setCookie("", "", -1);
}
},
// 获取cookie
getCookie(key) {
if (document.cookie.length > 0) {
var start = document.cookie.indexOf(key + "=");
if (start !== -1) {
start = start + key.length + 1;
var end = document.cookie.indexOf(";", start);
if (end === -1) {
end = document.cookie.length;
}
return unescape(document.cookie.substring(start, end));
}
}
return "";
},
/* 这样去cookie
函数中的参数为 要获取的cookie键的名称。
function getCookie(userName){
if (document.cookie.length>0){
c_start=document.cookie.indexOf(userName+ "=");
if (c_start!=-1){
c_start=c_start + userName.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1){
c_end=document.cookie.length;
}
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
var userName = getCookie('userName');
*/
// 保存新增cookie
setCookie: function(uname, upass, exdays) {
var exdate = new Date();
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
window.document.cookie =
"username" + "=" + uname + ";path=/;expires=" + exdate.toGMTString();
window.document.cookie =
"password" + "=" + upass + ";path=/;expires=" + exdate.toGMTString();
}
/* 或者这样设置
函数中的参数分别为 cookie 的名称、值以及过期天数
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())
}
setCookie('userName', 'xxx', 1); // cookie过期时间为1天。
// 设置过期时间以秒为单位
function setCookie(c_name,value,expireseconds){
var exdate = new Date();
exdate.setTime(exdate.getTime() + expireseconds * 1000);
document.cookie = c_name + "=" + escape(value) + ((expireseconds == null) ? "" : ";expires=" + exdate.toGMTString())
}
setCookie('userName', 'xxx', 3600); //cookie过期时间为一个小时
*/
}
};
</script>
//样式就自己写吧
<style scoped>
.login-container {
margin: 0 auto;
width: 100%;
background-image: url(../../assets/images/bj.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.login-content {
width: 440px;
height: 400px;
margin-left: 60%;
margin-top: 1%;
border: 1px solid transparent;
background-image: url(../../assets/images/xbj.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
}
.img {
width: 356px;
height: 54px;
margin-left: 62%;
margin-top: 9%;
}
.login-title {
margin-left: 67%;
margin-top: 16px;
width: 251px;
height: 37px;
font-size: 29px;
font-family: PingFang SC;
color: #3EAAFF;
line-height: 26px;
}
.login-word {
width: 268px;
height: 23px;
font-size: 28px;
font-family: PingFang SC;
color: #22C0FD;
line-height: 26px;
margin-left: 65%;
margin-top: 12px;
}
.title {
width: 138px;
height: 29px;
font-size: 26px;
font-family: PingFang SC;
color: #008EFF;
line-height: 25px;
margin-left: 36%;
margin-top: 20px;
}
.login-content >>> .el-input__inner {
width: 360px;
height: 48px;
background: rgba(24, 136, 203, 0.3);
border: 2px solid #0E95E5;
border-radius: 5px;
margin-left: 42px;
padding-left: 22px;
color: #fff;
}
.login-content >>> .el-button.el-button--primary {
width: 360px !important;
height: 48px;
background-color: #008EFF;
border-radius: 5px;
margin-top: 19px;
margin-left: 42px;
}
.login-content >>> .el-checkbox__inner {
background: rgba(24, 136, 203, 0.3);
border: 1px solid #0E95E5;
border-radius: 2px;
margin-left: 47px;
}
.login-content >>> .el-checkbox__label {
color: #fff;
}
.login-content >>> .el-checkbox__input.is-checked+.el-checkbox__label {
color: #fff;
}
.login-content >>> .el-checkbox__inner::after {
border-color: #0E95E5;
}
.login-content >>> .el-form-item__error {
margin-left: 82px;
font-size: 16px;
}
.login-content >>> .el-checkbox__input.is-checked .el-checkbox__inner {
background: rgba(24, 136, 203, 0.3);
}
.svg-container {
font-size: 16px;
color: #fff;
margin-left: 45px;
}
</style>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
3
0- 0
已为社区贡献13条内容
所有评论(0)