cookie的使用方法和使用场景

一、下面是使用vue.js封装了document.cookie使用方法的代码：

提取setCookie，getCookie, deleteCookie方法放置cookiehelp.js文件，方便其他需要的页面调用

//此方法是往cookie里面设置某个变量

const setCookie = (employeeId, value, expiredays) => {
  let expireDate = new Date()
  if (expiredays === null) {

    //如果不自定义cookie的过期时间，默认是浏览器关闭时，会清除cookie
    expireDate.setTime(expireDate.getTime() - 1)
  } else {

   //自定义设置cookie过期时间，若expiredays = 1，则cookie会在一天之后清除，浏览器是以毫秒为单位来计算时间
    expireDate.setTime(expireDate.getTime() + (expiredays * 24 * 3600 * 1000))
  }
  document.cookie = employeeId + '=' + escape(value) + ((expiredays == null) ? '' : ';expires=' + expireDate.toGMTString())
}

//此方法是从cookie中读取某个变量
const getCookie = (key) => {
  let value = ''
  if (document.cookie.length > 0) {
    let resultArray = document.cookie.split(';')
    for (let i = resultArray.length - 1; i >= 0; i--) {
      if (resultArray[i].trim().substring(0, key.length) === key) {
        value = unescape(resultArray[i].trim().substring(key.length + 1))
      }
    }
  }
  return value
}

//此方法是从cookie里面删除某个变量

const deleteCookie = (key) => {
  let expireDate = new Date()
  expireDate.setTime(expireDate.getTime() - 1)
  let value = getCookie(key)
  if (value !== null) {
    document.cookie = key + '=' + ';expires=' + expireDate.toGMTString()
  }
}

module.exports = {
  setCookie: setCookie,
  getCookie: getCookie,

  deleteCookie: deleteCookie

}

二、使用document.cookie的页面testcookie.vue页面代码：

三、使用场景：

1、第一次登录往cookie设置登录的信息，下一次打开页面从cookie里面获取信息，跳过登录；

2、打开微信公众号页面，当获取用户基本信息时，总是需要走微信授权页面去获取用户信息，可以在第一次打开页面时，走完微信授权，往cookie里面设置用户的信息，从而以后可以不走微信授权，优化页面加载速度；