本篇文章主要介绍vue3如何使用cookie
官方文档:vue3-cookies - npm
安装
npm install vue3-cookies --save
or
yarn add vue3-cookies
使用
<script lang="ts" setup>
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();
// 设置cookie 参数说明( 关键值(keyName),参数值(value),过期时间(expireTimes))
cookies.set("name", "John","30d");//30天过期
cookies.set("name1", "White");
cookies.set("name2", "Petter");
// 获取cookie
const n = cookies.get("name");//返回 John
const n1 = cookies.get("name1");//返回 White
const n2 = cookies.get("name2");//返回 Petter
console.log(n, n1, n2);//返回 John,White,Petter
// 删除cookie
cookies.remove("name1");
// 判断cookie是否存在
const b1 = cookies.isKey("name");//返回 true
const b2 = cookies.isKey("name1");//返回 false
console.log(b1, b2);//返回 true,false
// 获取所有的 cookie
const allKeys = cookies.keys();
console.log(allKeys);// 返回 ["name","name2"]
allKeys.forEach(k=>{
console.log(k,cookies.get(k));
// name John
// name2 Petter
})
</script>
设置cookie超时时间,格式为数字+时间单位,例如30天,写为 30d
时间单位 | 说明 |
---|---|
y | 年 |
m | 月 |
d | 日 |
h | 小时 |
min | 分 |
s | 秒 |
特别说明
如果 设置cookies时,传递的值不能是一个对象,必须将对象转换为字符串,但是获取cookies时,返回的是一个对象,可以直接调用对象的属性值
<script lang="ts" setup>
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();
const ui = { name: "Mike", code: "1001" };
// ui 对象必须转换为字符串
cookies.set("ui", JSON.stringify(ui));
const ui_c = cookies.get("ui");//返回的是一个对象,可以直接调用属性
const ui_c: any = cookies.get("ui");
console.log("name", ui_c.name)
console.log("code", ui_c.code);
//返回
// name Mike
// code 1001
</script>