Vue3控件-cookies

本篇文章主要介绍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>