一、下面是使用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里面设置用户的信息，从而以后可以不走微信授权，优化页面加载速度；