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

js-cookie和vue-cookies(Cookie使用教程)

简述:js-cookie和vue-cookies都是vue项目中的插件,下载相关依赖后,可以用来存储、获取、删除Cookie等操作,思路相同,操作时稍有不同,当然也可以用原生js来获取Cookie;

⭐                js-cookie  ⭐

使用方式:

1、下载安装依赖,js-cookie;

//在项目中使用npm下载相关依赖npm install --save js-cookie

2、页面引入使用;

//然后在main.js或者需要使用的页面引入import Cookies from 'js-cookie'

3、js-cookie,使用详细(存储 获取 删除);

存储Cookie:

// 创建一个名称为name,对应值为value的Cookie,由于没有设置失效时间,
// 默认失效时间为该网站关闭时
Cookies.set('name', 'value')// 创建一个有效时间为7天的Cookie
Cookies.set('name', 'value', { expires: 7 })// 创建一个带有路径的Cookie
Cookies.set('name', 'value', { expires: 7, path: '' })// 创建一个value为对象的Cookie
const obj = { name: 'xiaohong' }
Cookies.set('user', obj)

获取Cookie:

// 获取指定名称的Cookie
Cookies.get(name) // value// 获取value为对象的Cookie
const obj = { name: 'xiaohong' }
Cookies.set('user', obj)
JSON.parse(Cookies.get('user'))// 获取所有Cookie
Cookies.get()

删除Cookie:

// 删除指定名称的Cookie
Cookies.remove('name')// 删除带有路径的Cookie
Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') //直接删,会报错!
Cookies.remove('name', { path: '' }) // success!// more
// 当你删除一个cookie时,你不依赖于默认属性,
// 你必须传递与用来设置cookie完全相同的路径和域属性:
Cookies.remove('name', { path: '', domain: '.yourdomain.com' })

⭐                vue-cookies  ⭐

使用方式:

1、下载安装依赖,vue-cookies;

npm i --save vue-cookies

2、在main.js中,全局引入使用;

import VueCookies from 'vue-cookies';
Vue.use(VueCookies);

3、vue-cookies,使用详细(存储 获取 删除);

存储一个Cookie:

this.$cookies.set("token", value1, {expires: "7D"});// keyName => "token"// value =>  value1// 设置过期时间 = > {expires: "7D"}

获取一个Cookie:

this.$cookies.get("token")    // return value  

删除一个Cookie:

this.$cookies.remove("token"[, path [, domain]])    // return this

Cookie是否存在:

this.$cookies.isKey("token")    // return false or true

获取所有 Cookie ,以数组形式返回:

this.$cookies.keys()    // return a array

设置Cookie过期时间:

//30天后过期,全局设置
this.$cookies.config('30d')y:year 年
m:month 月
d: day 日
h:hour 时
min: minute 分
s :second 秒
//填的值1d为一天,1h为一小时,1min为一分钟,1s为1秒,不分大小写
//不写过期时间,默认为1天过期

感觉有用,就一键三连,感谢(●'◡'●)

相关文章:

js-cookie和vue-cookies(Cookie使用教程)

简述:js-cookie和vue-cookies都是vue项目中的插件,下载相关依赖后,可以用来存储、获取、删除Cookie等操作,思路相同,操作时稍有不同,当然也可以用原生js来获取Cookie; ⭐ js-coo…...

开创高质量发展新局面,优炫数据库助推数字中国建设

最新印发《数字中国建设整体布局规划》,建设数字中国是数字时代推进中国式现代化的重要引擎,是构筑国家竞争新优势的有力支撑。 数字中国建设按照“2522”的整体框架进行布局,即夯实数字基础设施和数据资源体系“两大基础”,推进…...

【项目实战】为什么我选择使用CloseableHttpClient,而不是HttpClient,他们俩有什么区别?

一、HttpClient介绍 HttpClient是Commons HttpClient的老版本,已被抛弃,不推荐使用; HttpClient是一个接口,定义了客户端HTTP协议的操作方法。 它可以用于发送HTTP请求和接收HTTP响应。 HttpClient接口提供了很多方法来定制请求…...

Spark 内存运用

RDD Cache 当同一个 RDD 被引用多次时,就可以考虑进行 Cache,从而提升作业的执行效率 // 用 cache 对 wordCounts 加缓存 wordCounts.cache // cache 后要用 action 才能触发 RDD 内存物化 wordCounts.count// 自定义 Cache 的存储介质、存储形式、副本…...

SpringBoot集成Swagger3.0(入门) 02

文章目录Swagger3常用配置注解接口测试API信息配置Swagger3 Docket开关,过滤,分组Swagger3常用配置注解 ApiImplicitParams,ApiImplicitParam:Swagger3对参数的描述。 参数名参数值name参数名value参数的具体意义,作用。required参…...

网络协议丨ICMP协议

ICMP协议,全称 Internet Control Message Protocol,就是互联网控制报文协议。我们其实对它并不陌生,我们平时经常使用的”ping“一下就是基于这个协议工作的。网络包在异常复杂的网络环境中传输时,常常会遇到各种各样的问题。当遇…...

12.1 基于Django的服务器信息查看应用(系统信息、用户信息)

文章目录新建Django项目创建子应用并设置本地化创建数据库表创建超级用户git管理项目(requirements.txt、README.md、.ignore)主机信息监控应用的框架搭建具体功能实现系统信息展示前端界面设计视图函数设计用户信息展示视图函数设计自定义过滤器的实现前…...

ExSwin-Unet 论文研读

ExSwin-Unet摘要1 引言2 方法2.1 基于窗口的注意力块2.2 外部注意力块2.3 不平衡的 Unet 架构2.4 自适应加权调整2.5 双重损失函数3 实验结果3.1 数据集3.2 实现细节3.3 与 SOTA 方法的比较3.4 消融研究4 讨论和限制5 结论数据集来源: https://feta.grand-challenge…...

置顶!!!主页禁言提示原因:在自己论坛发动态误带敏感词,在自己论坛禁止评论90天

置顶!!!主页禁言提示原因:在自己论坛发动态误带敏感词,在自己论坛禁止评论90天 置顶!!!主页禁言提示原因:在自己论坛发动态误带敏感词,在自己论坛禁止评论90天…...

优思学院|解密六西格玛:探索DMAIC和DMADV之间的区别

六西格玛方法中最为广泛使用的两种方法是DMAIC和DMADV。这两种方法都是为了让企业流程更加高效和有效而设计的。虽然这两种方法有一些重要的共同特点,但它们并不可以互相替代,并且被开发用于不同的企业流程。在更详细地比较这两种方法之前,我…...

Pytorch的DataLoader输入输出(以文本为例)

本文不做太多原理介绍,直讲使用流畅。想看更多底层实现-〉传送门。DataLoader简介torch.utils.data.DataLoader是PyTorch中数据读取的一个重要接口,该接口定义在dataloader.py脚本中,只要是用PyTorch来训练模型基本都会用到该接口。本文介绍t…...

代谢组学:Microbiome又一篇!绘制重症先天性心脏病新生儿肠道微生态全景图谱

文章标题:Mapping the early life gut microbiome in neonates with critical congenital heart disease: multiomics insights and implications for host metabolic and immunological health 发表期刊:Microbiome 影响因子:16.837…...

Java基本类型所占字节简述

类型分类所占字节取值范围boolean布尔型1bit0 false、 1 true (1个bit 、1个字节、4个字节)char ​字符型(Unicode字符集中的一个元素)​ 2字节-32768~32767(-2的15次方~2的15次方-1)byte整型1字节-128&a…...

Linux vi常用操作

vi/vim 共分为三种模式,分别是命令模式(Command mode),输入模式(Insert mode)和底线命令模式(Last line mode)。 这三种模式的作用分别是: 命令模式: 用户刚…...

Unicode(宽字节)、ANSI(多字节)

1、什么时候用Unicode(宽字节),什么时候用ANSI(多字节)? 在linux/windows等操作系统中使用的,一般都是Unicode(宽字节)。 下位机PLC/单片机等硬件设备中使用,一般都是ANSI(多字节)。 所以,通讯中(比如VS项目&#x…...

STM32实战之LED循环点亮

接着上一章讲。本章我们来讲一讲LED流水灯,循环点亮LED。 在LED章节有的可能没有讲到,本章会对其进行说明,尽量每个函数说一下作用。也会在最后说一下STM32的寄存器,在编程中寄存器是避免不了的东西,寄存器也是非常好理…...

智慧厕所智能卫生间系统有哪些功能

南宁北站智能厕所主要功能有哪些?1、卫生间环境空气监测男厕、女厕环境空气监测系统包括对厕所内的温度、湿度、氨气、硫化氢、PM2.5、烟雾等气体数据的实时监测。2、卫生间厕位状态监测系统实时监测厕位内目前的使用状态(有人或无人),数据信…...

【网络】套接字 -- TCP

🥁作者: 华丞臧. 📕​​​​专栏:【网络】 各位读者老爷如果觉得博主写的不错,请诸位多多支持(点赞收藏关注)。如果有错误的地方,欢迎在评论区指出。 推荐一款刷题网站 👉 LeetCode刷题网站 文章…...

NDK C++ map容器

map容器// TODO map容器 #include <iostream> #include <map>using namespace std;int main() {// TODO map<int, string>按key值排序&#xff0c;同一个key不可以重复插入map<int, string> map1;map1.insert(pair<int, string>(1, "111&qu…...

linux(Centos)安装docker

官网地址&#xff1a;Install Docker Engine on CentOS 首先检查linux系统版本及内核&#xff1a; 安装docker要求系统版本至少为7.x版本&#xff0c;内核至少为3.8以上 cat /etc/redhat-release # 查看系统版本号uname -r #查看linux系统内核 检查系统是否能连上外网&#…...

ChatGPT文档上传安全指南:如何避免敏感信息泄露

ChatGPT文档上传安全指南&#xff1a;如何避免敏感信息泄露 在当今AI应用开发热潮中&#xff0c;将文档上传至ChatGPT等大语言模型进行内容分析、总结或问答&#xff0c;已成为提升工作效率的常见场景。然而&#xff0c;许多开发者在兴奋地集成这一强大功能时&#xff0c;往往…...

基于深度学习YOLOv12的管道泄漏检测系统(YOLOv12+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型)

一、项目介绍 管道泄漏检测是工业安全生产中的重要环节&#xff0c;传统的人工巡检方式存在效率低、实时性差、易漏检等问题。本项目基于最新的YOLOv12目标检测算法&#xff0c;开发了一套智能管道泄漏检测系统&#xff0c;实现对管道泄漏的实时、精准识别。 系统采用先进的深…...

LibreOffice无界面转换实战:用Python在Linux服务器实现DOCX批量转PDF

LibreOffice无界面转换实战&#xff1a;用Python在Linux服务器实现DOCX批量转PDF 在当今企业级文档处理流程中&#xff0c;自动化转换办公文档格式已成为提升效率的关键环节。对于部署在Linux服务器上的文档处理系统而言&#xff0c;如何在不依赖图形界面的情况下&#xff0c;稳…...

手把手教你读懂SAP SD定价中的红绿灯图标(KINAK字段全解析)

SAP SD定价红绿灯图标全解析&#xff1a;从业务逻辑到实战诊断 在SAP SD模块的日常操作中&#xff0c;定价条件的有效性判断直接影响着销售订单的准确性和业务决策效率。那些看似简单的红绿灯图标背后&#xff0c;隐藏着复杂的业务规则和系统逻辑。本文将带您深入理解KINAK字段…...

Windows音频捕获终极革命:告别系统混音器,实现进程级精准录音

Windows音频捕获终极革命&#xff1a;告别系统混音器&#xff0c;实现进程级精准录音 【免费下载链接】win-capture-audio An OBS plugin that allows capture of independant application audio streams on Windows, in a similar fashion to OBSs game capture and Discords …...

保姆级教程:用Docker Compose一键部署ZLMediaKit流媒体服务器(含OBS推流配置)

从零搭建私有流媒体平台&#xff1a;Docker Compose ZLMediaKit OBS全流程指南 流媒体技术正在重塑内容传播的方式。无论是企业内部培训、游戏直播还是产品演示&#xff0c;一个稳定高效的私有流媒体平台都能显著提升沟通效率。本文将手把手教你如何用Docker Compose快速部署…...

嵌入式系统常用轻量级校验算法解析

单片机中常用的轻量级校验算法 1. 校验算法概述 在嵌入式系统开发中&#xff0c;数据校验是确保通信可靠性和数据完整性的关键技术手段。无论是UART通信中的奇偶校验、CAN总线中的CRC校验&#xff0c;还是Modbus、MAVlink、USB等协议中的校验机制&#xff0c;都体现了校验算法…...

罗斯蒙特RoseMount手操器TREXLFPKL9S1

罗斯蒙特475手操器是一款由艾默生&#xff08;Emerson&#xff09;推出的高性能现场通讯设备&#xff0c;广泛应用于工业自动化领域&#xff0c;用于配置、校准和诊断HART及Foundation Fieldbus协议的智能仪表设备。它具备彩色图形界面、蓝牙通信、强大的现场诊断功能和可用户升…...

英雄联盟智能助手完全指南:3分钟掌握LCU API自动化工具

英雄联盟智能助手完全指南&#xff1a;3分钟掌握LCU API自动化工具 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 还在为英雄联盟…...

从3大维度突破OCR效率瓶颈:5类场景的实战解决方案

从3大维度突破OCR效率瓶颈&#xff1a;5类场景的实战解决方案 【免费下载链接】Umi-OCR_plugins Umi-OCR 插件库 项目地址: https://gitcode.com/gh_mirrors/um/Umi-OCR_plugins 在数字化办公与学习中&#xff0c;OCR&#xff08;光学字符识别&#xff09;技术已成为信息…...