vue cookie操作 存储、获取、清除

前言

    本文用于简单的vue页面cookie存储、获取、清除操作，若果涉及到高级的cookie安全性问题请自行百度

一，创建cookie工具的js文件

/**
 * cookie操作
 * 注意：1.存入cookie的敏感信息必须加密
 *      2.cookie设置有效时间
 * 更高级的cookie安全问题请自行百度
 */
export default ({

  /**
   * 设置cookie
   * @param tel 登陆者账号
   * @param name 登陆者昵称
   * @param day cookie过期时间（单位：天）
   */
  setCookie(tel, name, day) {
    var date = new Date();  // 获取时间

    //date.getTime()：指定的日期和时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数。
    date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * day);  // 保存天数 1000ms * 60s * 60min * 24h = 1d

    // 字符串拼接cookie
    window.document.cookie = "userTel" + "=" + tel + ";path=/;expires=" + date.toGMTString();
    window.document.cookie = "userName" + "=" + name + ";path=/;expires=" + date.toGMTString();
  },

  /**
   * 获取cookie
   * @param key 需要对应值的key
   * @returns value key所对应的值
   * document.cookie直接获取的cookie原格式：userTel=***********; userName=***
   * 注意：获取原cookie格式的";"后含有一个空格
   */
  getCookie(key) {
    if(document.cookie.length > 0) {
      // 切割后格式：userTel=***********,userName=***
      var arr = document.cookie.split('; ');
      var value = '';  // 用于存储所需cookie值
      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=');  // 再次切割
        if (arr2[0] == key){
          value = arr2[1];  
          return value;
        }
      }
    }
    return null
  },

  /**
   * 清除cookie
   * 将cookie的数据设空，时间设0
   */
  clearCookie: function() {
    this.setCookie("", "", 0);
  },
})

二，在main.js中引入cookie方法的js文件 （common为笔者存放的cookie.js目录文件）

import common from '@/common/cookie.js'

三，cookie.js中的存储、获取、清除方法使用

1.在vue页面登陆事件中调用cookie存储方法（此"this.ruleForm.tel"和"this.ruleForm.name"为登陆信息）

this.common.setCookie(this.ruleForm.tel, this.ruleForm.name, 1)

2.在vue页面调用cookie数据获取方法 （获取cookie中存储的登陆者名字）

<h1>{{ this.common.getCookie('userName') }}</h1>

3. 在vue页面调用cookie清除cookie数据方法

logout() {
    this.$confirm('确认注销该用户?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.common.clearCookie();   //注销
      this.$message({
        type: 'success',
        message: '注销成功!'
      });
      this.$router.replace('/login');
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消注销'
      });
    });
  }

四，浏览器控制台查看cookie的存储数据信息