Vue中如何设置cookies缓存数据？

本文共计763个文字，预计阅读时间需要4分钟。

目录+使用vue-cookies插件+第一步：安装+第二步：全局引入+main.js+第三步：设置cookies+第四步：获取cookies+Vue使用缓存遇到的坑总结+（1）good-storage+good-storage库地址+（2）vue-cookie+vue

目录

• 使用vue-cookies插件
• 第一步：安装
• 第二步：全局引入 main.js 无需多言
• 第三步：设置cookies
• 第四步：获取cookies
• vue使用缓存遇到的坑总结
• (1) good-storage good-storage库地址
• (2) vue-cookie vue-cookie库地址
• (3) 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不同，别的貌似没有什么大的区别。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。