vue中的cookies缓存存值方式 超简单
作者：城郭里的小飞象
这篇文章主要介绍了vue中的cookies缓存存值方式，超简单！具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
使用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。等这些都可以用来缓存。
(1) good-storage good-storage库地址
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：设置的缓存，当浏览器关闭，或者页面调转外部，设置的缓存就会失效。这也不是我们预期想要的。
(2) vue-cookie vue-cookie库地址
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等。
(3) vue-cookies vue-cookies库地址
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不同，别的貌似没有什么大的区别。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。