当前位置: 首页 > news >正文

vue中 js-cookie 用法

js-cookie是一个用于在浏览器中处理Cookie的轻量级JavaScript库 ,在Vue3项目中使用它,可以方便地进行Cookie的读取、写入和删除操作。下面介绍具体的使用步骤:

1. 安装js-cookie

在Vue3项目的根目录下,通过npm或yarn安装js-cookie

  • 使用npm
npm install js-cookie
  • 使用yarn
yarn add js-cookie

2. 引入js-cookie

在需要使用js-cookie的Vue组件或文件中,引入js-cookie库:

import Cookies from 'js-cookie';

3. 写入Cookie

使用Cookies.set()方法可以写入Cookie,该方法接受两个必填参数:Cookie的名称和值,还可以接受一个可选的配置对象来设置Cookie的属性,如过期时间、路径、域名等。

// 基本用法,设置一个名为 'username',值为 'John' 的Cookie
Cookies.set('username', 'John'); // 设置一个带有过期时间的Cookie,例如设置过期时间为7天
Cookies.set('token', 'abc123', { expires: 7 }); // 设置带有路径的Cookie,只有在指定路径及其子路径下的页面才能访问该Cookie
Cookies.set('userInfo', { name: 'Alice', age: 30 }, { path: '/profile' }); 

4. 读取Cookie

使用Cookies.get()方法读取Cookie,该方法接受Cookie的名称作为参数,如果Cookie存在则返回其值,否则返回undefined

// 读取名为 'username' 的Cookie
const username = Cookies.get('username'); 
console.log(username); // 读取所有Cookie,返回一个包含所有Cookie键值对的对象
const allCookies = Cookies.get(); 
console.log(allCookies); 

5. 删除Cookie

使用Cookies.remove()方法删除Cookie,该方法接受Cookie的名称作为参数,同时如果设置Cookie时指定了路径、域名等属性,删除时也需要传入相同的属性配置,才能正确删除对应的Cookie。

// 删除名为 'username' 的Cookie
Cookies.remove('username'); // 删除带有路径的Cookie,需要传入相同的路径配置
Cookies.remove('userInfo', { path: '/profile' }); 

6. 在Vue3组件中使用示例

<template><div><button @click="setCookie">设置Cookie</button><button @click="getCookie">获取Cookie</button><button @click="removeCookie">删除Cookie</button><p v-if="cookieValue">{{ cookieValue }}</p></div>
</template><script setup>
import Cookies from 'js-cookie';
import { ref } from 'vue';const cookieValue = ref('');const setCookie = () => {Cookies.set('testCookie', 'Hello, js-cookie!', { expires: 1 });
};const getCookie = () => {const value = Cookies.get('testCookie');cookieValue.value = value || 'Cookie不存在';
};const removeCookie = () => {Cookies.remove('testCookie');cookieValue.value = 'Cookie已删除';
};
</script>

以上代码展示了在Vue3项目中如何使用js-cookie进行Cookie的常见操作。通过合理运用js-cookie,可以方便地管理应用中的Cookie数据,实现用户状态管理、个性化设置等功能。

http://www.lryc.cn/news/587145.html

相关文章:

  • 深度学习算法:开启智能时代的钥匙
  • DVWA靶场通关笔记-XSS DOM(High级别)
  • 详解缓存淘汰策略:LFU
  • 初级网安作业笔记1
  • 3. 【Blazor全栈开发实战指南】--Blazor是什么?为什么选择Blazor?
  • [特殊字符]使用 Nginx 将 HTTP 重定向到 HTTPS
  • Spring-----MVC配置和基本原理
  • CD49.【C++ Dev】容器适配器模式
  • 一个链表节点构造函数的定义及使用
  • 如何将FPGA设计的验证效率提升1000倍以上(4)
  • Datawhale AI 夏令营【更新中】
  • 动态规划题解_零钱兑换【LeetCode】
  • 数学与应用数学核心课程有哪些?全文解析!
  • Cursor精准上下文指定
  • [Python 基础课程]字典
  • Spring AI 项目实战(十七):Spring Boot + AI + 通义千问星辰航空智能机票预订系统(附完整源码)
  • 12.3 安全内存区域划分
  • Kubernetes集群安装
  • Word中的批注显示与修订显示
  • 无需付费即可利用AI消除音频噪声和生成字幕
  • 云服务器的基础使用
  • 代码部落 20250713 CSP-J复赛 模拟赛
  • Java#为什么使用ThreadLocal传参而不是直接传参
  • 每天一个前端小知识 Day 30 - 前端文件处理与浏览器存储机制实践
  • 5.适配器模式
  • ClickHouse 分区机制详解:规则、合并与实践指南
  • LeetCode 1156.单字符重复子串的最大长度
  • 力扣 hot100 Day43
  • OSPF与BGP的联动特性
  • 【设计模式】备忘录模式(标记(Token)模式)