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页面代码:

<template>

  <div class=”test-cookie”>

    从cookie里面获取userId的值为:<span v-text=”userIdInCookie”></span><br>

  </div>

</template>

<script>

import {setTitle} from ‘../../utils/titlehelp’

//引用封装好了cookie.js,使用了相对路径去引用,具体什么路径和个人的项目目录结构有关

import {setCookie, getCookie} from ‘../../utils/cookiehelp’

export default {

  ready () {

    let vm = this

    setTitle(‘测试vue.js使用document.cookie’)

    let userId = ‘8a9s5r4646e’

    setCookie(‘userId’, userId, 1)

    vm.userIdInCookie = getCookie(‘userId’)

  },

  data () {

    return {

      userIdInCookie: null

    }

  },

  methods: {

  },

  components: {

  }

}

</script>

<style lang=”less”>

@import ‘./testcookie.less’;

</style>

三、使用场景:

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

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


版权声明:本文为weixin_41382629原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。