欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中的cookies緩存存值方式 超簡(jiǎn)單

 更新時(shí)間：2022年08月03日 10:22:01   作者：城郭里的小飛象  
這篇文章主要介紹了vue中的cookies緩存存值方式，超簡(jiǎn)單！具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用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é)

緩存選對(duì)了，順風(fēng)順?biāo)?，選錯(cuò)了，全都是坑。

[ 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è)置的緩存，永久的，除非自己手動(dòng)清除，不然會(huì)一直都存留。這肯定不是我們想要的。
  • sessionStorage ：設(shè)置的緩存，當(dāng)瀏覽器關(guān)閉，或者頁面調(diào)轉(zhuǎn)外部，設(shè)置的緩存就會(huì)失效。這也不是我們預(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)文章

最新評(píng)論