【Vue甜点】vue使用缓存机制

一、cookie

1、安装vue-cookies

npm install vue-cookies --save

2、 引入

打开项目的main.js文件

// ==== cookie缓存 ====
import VueCookies from 'vue-cookies'

const app = createApp(App)
app.use(VueCookies)

3、设置cookie

使用set(key, value, age)添加cookis。其中：
【key】为缓存的键名
【value】为缓存的具体值
【age】为缓存的有效期，单位秒

this.$cookies.set('cookie', '一个测试', 60*5);

4、获取cookie值

this.$cookies.get('cookie');

5、删除cookie

this.$cookies.remove('cookie');

6、判断cookie是否存在

若存在返回true，反之则返回false

this.$cookies.isKey('token');

7、获取cookie的所有key

以数组形式返回所有的cookie键名

this.$cookies.keys() 

8、设置cookie过期时间

有效期可用字符串

Unit	full name
y	year
m	month
d	day
h	hour
min	minute
s	second

大小写不敏感
默认为秒

8.1、设置全局有效期

// 10天后过期
this.$cookies.config('10d')
// 设置截至有效日期
this.$cookies.config(new Date(2019,03,13).toUTCString())
// 默认设置秒数过期时间
this.$cookies.config(60 * 60 * 24 * 30,'');

8.2、对单独cookie设置有效期

//不写age，默认为1天过期
this.$cookies.set("cookie1","默认有效期")
 
// 以秒为单位，设置1天过去
this.$cookies.set("cookie2","默认秒数有效期",60 * 60 * 24)
 
// 填写Date对象，明确指定过期时间
this.$cookies.set("cookie3","指定Date过期", new Date(2023, 11, 11)
 
// 填写一个时间字符串，指定过期时间
this.$cookies.set("cookie4","时间字符串对应日期过期", "Sat, 11 Mar 2024 13:14:00 GMT")
 
//浏览器会话结束时过期
this.$cookies.set("cookie5","浏览器页面关闭时过期","0");
 
//永不过期
this.$cookies.set("cookie6","永久有效",-1); 

9、在其他js页面使用

需要对cookie进行单独的引用

import Cookies from "vue-cookies";
Cookies.get('cookie1');

二、sessionStorage

用于临时保存页面的数据，在关闭页面或浏览器之后将会删除这些数据。

1、设置sessionStorage

使用setItem(key, value)添加sessionStorage。其中：
【key】为缓存的键名
【value】为缓存的具体值

window.sessionStorage.setItem('name', 'value')

2、获取sessionStorage

使用getItem(key)获取指定key的sessionStorage。其中：
【key】为缓存的键名

window.sessionStorage.getItem('name')

3、删除指定sessionStorage

window.sessionStorage.removeItem('name')

4、清空sessionStorage

window.sessionStorage.clear()