前端:Vue中使用JS-Cookie

news2024/7/6 20:14:33

在我们构建Vue站点时候,可能需要使用 cookie 来记录用户信息或者偏好设置,我们可以引入第三方库

GitHub - js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies

来方便地操作 cookie。接下来我们就来一步一步地实现在 Vue  中使用 JS-Cookie 来操作 cookie。

1. 安装JS-Cookie 

首先,在命令行中使用 npm 或 yarn 安装 JS-Cookie:

npm install js-cookie
# 或
yarn add js-cookie
2. 引入JS-Cookie

在需要使用 cookie 的组件中,引入

import Cookies from 'js-cookie'
3. 设置cookie
export const setCookie = Cookies.set.bind(Cookies)
export const removeCookie = Cookies.remove.bind(Cookies)
export const getCookie = Cookies.get.bind(Cookies)

使用的时候调用即可 

import { cookie } from '@/global/cookie'
const store = cookie()
store.setCookie()
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1891233.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

视频批量剪辑一键垂直翻转,轻松转换格式为mov,视频制作从此事半功倍!

在视频制作的海洋中,我们时常需要面对各种挑战,其中之一就是视频的翻转与调整。不论是出于创意需求还是格式转换的需要,视频翻转都是一个不可或缺的功能。今天,我要向大家介绍一款真正的批量视频翻转神器——视频剪辑高手&#xf…

Python高速下载及安装的十大必备事项与C++联调

选择正确的版本: 访问Python官网(https://www.python.org/)下载最新稳定版本,目前最新稳定版本为3.12.4 避免下载并安装Python 2.x版本,因为它已经停止维护。 选择适合操作系统的安装包: 根据你的操作系…

2.4 C#开发环境 xml格式保存参数----范例实现

2.4C#开发环境 xml格式保存参数----范例实现 1 程序参数保存目录层次说明 1 选择程序号| 相机号|窗口号 2 导入参数:就会从本地目录读取参数,并且显示图片和ROI 3 保存参数:把当前控件图片和ROI信息保存到指定程序号|相机号|窗口号中 2 参数…

Xilinx FPGA:vivado单端RAM实现输出偶数(单端RAM的简单应用)

一、实验步骤 (1)先创建一个工程 (2)调用IP资源找到RAMs&ROMs&BRAMs,选择其中的块资源 (3)修改配置参数 timescale 1ns / 1ps //写入0-99的数据,读出偶数 module single_ra…

MeEdu网校系统搜索功能问题处理

MeEdu通过 MeiliSearch 实现全文搜索服务。 一、下载 MeiliSearch 程序 https://github.com/meilisearch/MeiliSearch/releases/tag/v0.24.0 只能下载 v0.24.0 版本,其版本不支持 下载 meilisearch-linux-amd64就可以了 二、上传 MeiliSearch 三、启动命令如下…

如何用简单的html,css,js写出一个带有背景层的删除弹出框

虽然每次项目都是主要写后端,但是有时候前端的样式太丑了,也有点看不下去。弹出框是项目中用的比较多的,比如删除,修改或者添加什么的,都需要一个弹出框。 所以这里简单记录一下,应该如何实现。实现效果如…

threejs 微信小程序原生版本的使用 obj模型的加载

直接上代码&#xff0c; <canvas class"webgl" type"webgl" id"gl" bindtouchstart"onTX" bindtouchend"onTX" bindtouchmove"onTX" style"width:100vw;height:90vh"></canvas> const co…

手写starter写核心

文章目录 使用cn.smart 不能使用com 避免在yml配置的时候 开启或者 写万能接口实现调整日志级别写了core核心 但是没有引入其他功能组件,就是注解可以使用但是功能没有增,所以core的作用就是写入注解从新写starter 第一步提取注解 写到核心包里面,看其他包 新建模块 使用cn.s…

5分钟教你部署MySQL8.0环境

此方法基于Windows操作系统&#xff01; 一、在MySQL官网单击downloads&#xff08;下载&#xff09;MySQLhttps://www.mysql.com/cn/ 选择在Windows操作系统下载 二、选择合适的版本 推荐下载第二种&#xff0c;安装时离线安装即可 三、安装MySQL8.0 1、找到MySQL下载完成…

STM32——GPIO(点亮LED)

一、GPIO是什么&#xff1f; 1、GPI/O(general porpose intput output):通用输入输出端口的简称&#xff0c;通俗地说&#xff0c;就是我们所学的51单片机的IO口&#xff0c;即P0_0等。但要注意&#xff1a;并非所有的引脚都是GPIO 输出模式下可控制端口输出高低电平&#xf…

zed_ros2_wapper colcon 报错

问题一&#xff1a; CMake Error at CMakeLists.txt:129 (find_package): By not providing “Findnmea_msgs.cmake” in CMAKE_MODULE_PATH this project has asked CMake to find a package configuration file provided by “nmea_msgs”, but CMake did not find one. Co…

二刷力扣——DP算法(子序列问题)

300. 最长递增子序列 定义是以本元素结尾&#xff0c;所以公式初始化都好弄。但是太慢 class Solution {public int lengthOfLIS(int[] nums) {int nnums.length;int[] dp new int[n];//以自己结尾的最长递增子序列dp[0]1;int maxzi1;for(int i1;i<n;i){dp[i]1;for(int j…

开源自动化热键映射工具autohotkey十大用法及精选脚本

AutoHotkey&#xff08;AHK&#xff09;是一款功能强大的热键脚本语言工具&#xff0c;它允许用户通过编写脚本来自动化键盘、鼠标等设备的操作&#xff0c;从而极大地提高工作效率。以下是AutoHotkey的十大经典用法&#xff0c;这些用法不仅解放了用户的双手&#xff0c;还展示…

(十二)纹理和采样

纹理 在绘制三角形的过程中&#xff0c;将图片贴到三角形上进行显示的过程&#xff0c;就是纹理贴图的过程 uv坐标 如果如果图片尺寸和实际贴图尺寸不一致&#xff0c;就会导致像素不够用了的问题 纹理与采样 纹理对象(Texture)&#xff1a;在GPU端&#xff0c;用来以一…

RPA 第一课

RPA 是 Robotic Process Automation 的简称&#xff0c;意思是「机器人流程自动化」。 顾名思义&#xff0c;它是一种以机器人&#xff08;软件&#xff09;来替代人&#xff0c;实现重复工作自动化的工具。 首先要说一句&#xff0c;RPA 不是 ChatGPT 出来之后的产物&#x…

新火种AI|国产大模型展开决战,是资本游戏还是技术革命?

作者&#xff1a;一号 编辑&#xff1a;美美 资本角逐与技术革新&#xff0c;国产大模型的双线战场已然开启。 随着人工智能技术的不断进步&#xff0c;国产大模型正迅速成为行业关注的焦点。在这个由数据驱动的时代&#xff0c;资本的注入和技术创新的加速&#xff0c;让国…

基于Teager-Kaiser能量算子的肌电信号降噪方法(MATLAB)

Teager-Kaiser能量算子是一种非线性算子&#xff0c;它能有效提取信号的瞬时能量&#xff0c;对信号瞬时变化具有良好的时间分辨率。Teager-Kaiser能量算子只需信号三个采样点&#xff0c;即可快速跟踪信号的幅值和角频率变化&#xff0c;计算实现简单、运算量小。 clc clear a…

excel表格如何换行,这几个操作方法要收藏好

Excel表格作为一款强大的数据处理工具&#xff0c;在日常工作和生活中被广泛应用。当需要在单元格内显示较长的文本内容或使数据更加清晰易读时&#xff0c;我们需要掌握一些换行技巧。下面将介绍几种常用的Excel换行方法&#xff1a; 一、使用快捷键换行 1、首先&#xff0c;…

SpringBoot+Vue集成AOP系统日志

新建logs表 添加aop依赖 <!-- aop依赖--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency> 新建获取ip地址工具类 import javax.servlet.http.H…

java常用类(3)

目录 一. 正则表达式 二. Math类 三. Random类 四. Date类 五. Calendar类 六. SimpDateFormate类 七. BigInteger类 八. BigDecimal类 一. 正则表达式 正则表达式(Regular Expression)就是用一些特殊的符号去匹配一个字符串是否符合规则,利用String类中的matches()方…