Web前端数据存储—cookie机制（设置，获取，删除cookie）

最新推荐文章于 2025-03-23 13:06:04 发布

小刘先生很努力

最新推荐文章于 2025-03-23 13:06:04 发布

阅读量1.2w

点赞数 3

文章标签：前端 javascript cookie

本文链接：https://blog.csdn.net/lzfengquan/article/details/122838921

版权

今天看到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>