vue中的cookies緩存存值方式 超簡單
更新時(shí)間：2022年08月03日 10:22:01 作者：城郭里的小飛象
這篇文章主要介紹了vue中的cookies緩存存值方式，超簡單！具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用vue-cookies插件
第一步：安裝
npm install vue-cookies --save
第二步：全局引入 main.js 無需多言
import Vue from 'vue' import VueCookies from 'vue-cookies' Vue.use(VueCookies)
第三步：設(shè)置cookies
this.$cookies.set('selectValue', this.value,"1h") ?
// ?selectValue==cookies名稱
// ?this.value==值
// ?1h cookies過期時(shí)間第四步：獲取cookies
this.$cookies.get('selectValue')完成啦~
vue使用緩存遇到的坑總結(jié)
緩存選對了，順風(fēng)順?biāo)?，選錯了，全都是坑。
[ localStorage 、sessionStorage 、cookie ]
vue中的緩存也是比較多的，例如：good-storage、vue-cookie、還有個(gè)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)
缺點(diǎn)：
localStorage：設(shè)置的緩存，永久的，除非自己手動清除，不然會一直都存留。這肯定不是我們想要的。sessionStorage：設(shè)置的緩存，當(dāng)瀏覽器關(guān)閉，或者頁面調(diào)轉(zhuǎn)外部，設(shè)置的緩存就會失效。這也不是我們預(yù)期想要的。
(2) vue-cookie vue-cookie庫地址
npm install vue-cookie --save
var Vue = require('vue');
var VueCookie = require('vue-cookie');
??
Vue.use(VueCookie);
??
// 設(shè)置cookie ?
this.$cookie.set('test', 'Hello world!', {expires: 1, domain: 'localhost'});
// expires 過期時(shí)間： ?
1Y ?----> ?1年?
1M ?----> ?1個(gè)月
1D ?----> ?1天
1h ?----> ?1小時(shí)
10m ----> ?10分支
30s ----> ?30秒
??
// 使用cookie
this.$cookie.get('test');
?
//刪除cookie
this.$cookie.delete('test');優(yōu)點(diǎn)：
可以設(shè)置緩存的過期時(shí)間、設(shè)置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)// 設(shè)置默認(rèn)配置 ? 過期時(shí)間7天
VueCookies.config('7d')
??
// 設(shè)置全局的
VueCookies.set('theme','default');
VueCookies.set('hover-time','1s');
??
// 設(shè)置cookie ? （expireTimes、path、domain非必須設(shè)置）
$cookies.set(keyName, value[, expireTimes[, path[, domain[, secure]]]])?
?
// 使用cookie
$cookies.get(keyName) ?
?
//刪除cookie
$cookies.remove(keyName [, path [, domain]])----------------完。----------------
暫時(shí)沒明白 vue-cookie和vue-cookies 的主要區(qū)別，除了設(shè)置cookie時(shí)的Api不同，別的貌似沒有什么大的區(qū)別。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue中監(jiān)聽input只能輸入數(shù)字及英文或者其他情況的問題
今天小編就為大家分享一篇解決vue中監(jiān)聽input只能輸入數(shù)字及英文或者其他情況的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
diff算法的本質(zhì)是找出兩個(gè)對象之間的差異,目的是盡可能復(fù)用節(jié)點(diǎn)。,下面這篇文章主要給大家介紹了關(guān)于Vue中diff算法的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue如何使用原生高德地圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
要在Vue?3和Electron中實(shí)現(xiàn)本地化,可以使用類似于在Vue項(xiàng)目中進(jìn)行本地化的方式,本文為大家介紹了一種常見的做法,希望對大家有所幫助2024-03-03
組件是 vue.js 最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無法相互引用,針對不同的使用場景,如何選擇行之有效的通信方式？這是我們所要探討的主題,本文總結(jié)了 vue 組件間通信的幾種方式,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了Vue-cli打包后如何本地查看的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue-Element-Admin集成自己的接口實(shí)現(xiàn)登錄跳轉(zhuǎn)
關(guān)于這個(gè)Vue-element-admin中的流程可能對于新的同學(xué)不是很友好，所以本文將結(jié)合實(shí)例代碼，介紹Vue-Element-Admin集成自己的接口實(shí)現(xiàn)登錄跳轉(zhuǎn)，感興趣的小伙伴們可以參考一下2021-06-06
vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯問題分析
由于package.json 文件中 vue、vue-template-compiler 版本號前面 多了個(gè) ^ 導(dǎo)致實(shí)際導(dǎo)入時(shí)，node_module中的 vue 版本可能被升級為 2.7.x，這篇文章主要介紹了vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯問題分析,需要的朋友可以參考下2023-01-01
vue3輸入框生成的時(shí)候如何自動獲取焦點(diǎn)詳解
記錄一下自己最近開發(fā)vue3.0的小小問題,下面這篇文章主要給大家介紹了關(guān)于vue3輸入框生成的時(shí)候如何自動獲取焦點(diǎn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue cli升級webapck4的步驟以及需要注意的地方，大家可以跟著操作學(xué)習(xí)下。2018-04-04