使用vue-cookies插件
第一步:安装
npm install vue-cookies --save
第二步:全局引入 main.js 无需多言
import Vue from 'vue' import VueCookies from 'vue-cookies' Vue.use(VueCookies)
第三步:设置cookies
this.$cookies.set('selectValue', this.value,"1h") // selectValue==cookies名称 // this.value==值 // 1h cookies过期时间
第四步:获取cookies
this.$cookies.get('selectValue')
完成啦~
vue使用缓存遇到的坑总结
缓存选对了,顺风顺水,选错了,全都是坑。
[ localStorage 、sessionStorage 、cookie ]
vue中的缓存也是比较多的,例如:good-storage、vue-cookie、还有个vue-cookies。等这些都可以用来缓存。
npm install good-storage
// main.js里面写入 import storage from 'good-storage' // localStorage storage.set(key,val) storage.get(key, def) // sessionStorage storage.session.set(key, val) storage.session.get(key, val)
缺点:
localStorage
:设置的缓存,永久的,除非自己手动清除,不然会一直都存留。这肯定不是我们想要的。sessionStorage
:设置的缓存,当浏览器关闭,或者页面调转外部,设置的缓存就会失效。这也不是我们预期想要的。
npm install vue-cookie --save
var Vue = require('vue'); var VueCookie = require('vue-cookie'); Vue.use(VueCookie); // 设置cookie this.$cookie.set('test', 'Hello world!', {expires: 1, domain: 'localhost'}); // expires 过期时间: 1Y ----> 1年 1M ----> 1个月 1D ----> 1天 1h ----> 1小时 10m ----> 10分支 30s ----> 30秒 // 使用cookie this.$cookie.get('test'); //删除cookie this.$cookie.delete('test');
优点:
可以设置缓存的过期时间、设置domain等。
npm install vue-cookies --save
两种引入方式:
//方式1: require var Vue = require('vue') Vue.use(require('vue-cookies')) //方式2: es2015 module import Vue from 'vue' import VueCookies from 'vue-cookies' Vue.use(VueCookies)
// 设置默认配置 过期时间7天 VueCookies.config('7d') // 设置全局的 VueCookies.set('theme','default'); VueCookies.set('hover-time','1s'); // 设置cookie (expireTimes、path、domain非必须设置) $cookies.set(keyName, value[, expireTimes[, path[, domain[, secure]]]]) // 使用cookie $cookies.get(keyName) //删除cookie $cookies.remove(keyName [, path [, domain]])
----------------完。----------------
暂时没明白 vue-cookie和vue-cookies 的主要区别,除了设置cookie时的Api不同,别的貌似没有什么大的区别。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。