Vue-CLI 项目 -vue-cookie 与 vue-cookies 处理 cookie

vue-cookie

一. 模块的安装

npm install vue-cookie --save
#--save 可以不用写

二. 配置 main.js

// 配置 cookie
import cookie from 'vue-cookie'
Vue.prototype.$cookie = cookie;  // 配置时候 prototype.$ 这里的名字自己定义不是固定是 cookie

三. 使用

created() {// 创建时间节点
    console.log('组件创建成功');
    let token = 'asd1d5.0o9utrf7.12jjkht';
    // 设置 cookie 默认过期时间单位是 1d(1 天)
    this.$cookie.set('token', token, 1);
},
mounted() {// 创建渲染节点
    console.log('组件渲染成功');
    let token = this.$cookie.get('token');
    console.log(token);
},
destroyed() {// 组件销毁节点
    console.log('组件销毁成功');
    this.$cookie.delete('token')
}

概述:

• 创建:this.$ 配置时候设置的名称.set('cookies 的 key',value, 时间最小单位为天且一定要为整数)
• 获取指定的key:this.$ 配置时候设置的名称.get('cookies 的 key`)
• 删除:this.$ 配置时候设置的名称.delete('cookies 的 key`)
• 这里删除如果没有重启浏览器 cookies 还在的, 不过值为空
  • 重启浏览器 cookies 才消失
• 检查某个 cookie name是否存在:this.$ 配置时候设置的名称.isKey('cookies 的 key`)

vue-cookies

一模块的安装

npm install vue-cookies --save
#--save 可以不用写

二. 配置 main.js

// 配置 cookie
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;  // 配置时候 prototype.$ 这里的名字自己定义不是固定是 cookies

三. 使用

概述:

• 创建:this.$ 配置时候设置的名称.set('cookies 的 key',value)
• 获取指定的key:this.$ 配置时候设置的名称.get('cookies 的 key`)
• 获取所有keys返回为数组的形式 :this.$ 配置时候设置的名称.keys ('cookies 的 key`)
• 删除:this.$ 配置时候设置的名称.remove('cookies 的 key`)
• 这里删除如果没有重启浏览器 cookies 还在的, 不过值为空
  • 重启浏览器 cookies 才消失
• 检查某个 cookie name是否存在:this.$ 配置时候设置的名称.isKey('cookies 的 key`)

相关配置:

• 到期时间全局设置

这里是全局的设置所有的cookie都会生效

this.$cookies.config('固定时间') // 填的值 1d 为一天,1h 为一小时,1min 为一分钟,1s 为 1 秒
// 指定时间
this.$cookies.config(new Date(2020,12,1))
this.$cookies.config("Sat, 13 Mar 2017 12:25:57 GMT")
// 如果是乘法
this.$cookies.config(6060) // 是 60s60s 依次类推
// 如果是单单空数组
this.$cookies.config(60) // 也是 60S

• 单个 cookie 设置

// 不写过期时间，默认为 1 天过期
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX")
// 1 天过期，忽略大小写
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX","1d")
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX","1D")
// 以秒为单位，设置 1 天过去
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX",60 * 60 * 24)
// 填写 Date 对象，明确指定过期时间
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", new Date(2017, 03, 12))
// 填写一个时间字符串，指定过期时间
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", "Sat, 13 Mar 2017 12:25:57 GMT")
// 浏览器会话结束时过期
this.$cookies.set("default_unit_second","input_value","0");
// 永不过期
this.$cookies.set("default_unit_second","input_value",-1);

设置过期时间，输入字符串类型 (字符均忽略大小写)：