Vue3设置缓存:storage.ts

在vue文件使用:

import { Local,Session } from '/@/utils/storage';
// Local
if (!Local.get('字段名')) Local.set('字段名', '字段的值');// Session 
Session.getToken()

storage.ts文件:

import Cookies from 'js-cookie';/*** window.localStorage 浏览器永久缓存* @method set 设置永久缓存* @method get 获取永久缓存* @method remove 移除永久缓存* @method clear 移除全部永久缓存*/
export const Local = {// 查看 v2.4.3版本更新日志setKey(key: string) {// @ts-ignorereturn `${__NEXT_NAME__}:${key}`;},// 设置永久缓存set<T>(key: string, val: T) {window.localStorage.setItem(Local.setKey(key), JSON.stringify(val));},// 获取永久缓存get(key: string) {let json = <string>window.localStorage.getItem(Local.setKey(key));return JSON.parse(json);},// 移除永久缓存remove(key: string) {window.localStorage.removeItem(Local.setKey(key));},// 移除全部永久缓存clear() {window.localStorage.clear();},
};/*** window.sessionStorage 浏览器临时缓存* @method set 设置临时缓存* @method get 获取临时缓存* @method remove 移除临时缓存* @method clear 移除全部临时缓存*/
export const Session = {// 设置临时缓存set(key: string, val: any) {if (key === 'token' || key === 'refresh_token') {Cookies.set(key, val);}window.sessionStorage.setItem(key, JSON.stringify(val));},// 获取临时缓存get(key: string) {if (key === 'token' || key === 'refresh_token') return Cookies.get(key);let json = <string>window.sessionStorage.getItem(key);return JSON.parse(json);},// 移除临时缓存remove(key: string) {if (key === 'token' || key === 'refresh_token') return Cookies.remove(key);window.sessionStorage.removeItem(key);},// 移除全部临时缓存clear() {Cookies.remove('token');Cookies.remove('refresh_token');Cookies.remove('bbId');window.sessionStorage.clear();},// 获取当前存储的 tokengetToken() {return this.get('token');},// 获取当前的用户getTenant() {return Local.get('bbId') ? Local.get('bbId') : 1;},
};

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

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

相关文章

uniapp 安卓 Pc端真机浏览器调试

下载插件:真机模拟浏览器 1. 安装, 每次启用时使用usb 线连接电脑, 并且打开手机或者POS (调试设备)开发者模式, 比如我的是pos 机 则在系统设置中找到版本号,点击多次就会触发开发者模式 2.打开真机模拟软件,打开后会打开一个浏览器,如果想要模拟google的浏览器则 在浏览器地…

精准键位提示,键盘盲打轻松入门

在说明精准键位提示之前&#xff0c;我们先来看一张图&#xff1a; 这是一张标准的基准键位图&#xff0c;也就是打字时我们双手的8个手指放在基准键位上&#xff0c;在打不同的字母时&#xff0c;我们的手指以基准键位为中心&#xff0c;或上、或下、或左、或右&#xff0c;在…

202109青少年软件编程(Python)等级考试试卷(四级)

第 1 题 【单选题】 执行如下 Python 代码后, 结果是?( ) def inverse(s,n=0): while s:n = n * 10 + s % 10s = s // 10return nprint

《拯救大学生课设不挂科第二期之Windows11下安装VC6.0(VC++6.0)与跑通Hello,World!程序教程》【官方笔记】

背景与目标人群&#xff1a; 大学第一次学C语言的时候&#xff0c;大部分老师会选择VC6这个编辑器。 但由于很多人是新手&#xff0c;第一次上大学学C语言。 老师要求VC6.0&#xff08;VC6.0&#xff09;写C语言跑程序可能很多人还是第一次接触电脑。 需要安装VC6这个编辑器…

Docker常用软件安装

文章目录 1.安装Tomcat1.docker hub查找镜像并复制拉取镜像命令2.拉取镜像到本地1.执行官网命令2.查看是否拉取成功 3.启动tomcat4.退出和重启1.由于是以交互方式启动的&#xff0c;所以不方便&#xff0c;直接ctrl c退出2.查看当前的容器3.使用docker start 命令启动容器&…

【cocos creator 】生成六边形地图

想要生成一个六边形组成的地图 完整代码示例 以下是完整的代码示例&#xff0c;包含了注释来解释每一步&#xff1a; cc.Class({extends: cc.Component,properties: {hexPrefab: {default: null,type: cc.Prefab},mapWidth: 10, // 网格的宽度&#xff08;六边形的数量&am…

前端React老项目打包caniuse-lite报错解决思路

1、下载项目&#xff0c;先更新.npmrc文件&#xff1a; registryhttp://registry.npmmirror.com 2、安装依赖&#xff0c;本地启动&#xff0c;运行正常&#xff0c;但直接提交代码线上打包时会报错&#xff1a; “ 未找到相关的合并请求。” 打开日志页面&#xff0c;报错信息…

【Flutter】线性布局弹性布局层叠布局

&#x1f525; 本文由 程序喵正在路上 原创&#xff0c;CSDN首发&#xff01; &#x1f496; 系列专栏&#xff1a;Flutter学习 &#x1f320; 首发时间&#xff1a;2024年5月25日 &#x1f98b; 欢迎关注&#x1f5b1;点赞&#x1f44d;收藏&#x1f31f;留言&#x1f43e; 目…

4、PHP的xml注入漏洞(xxe)

青少年ctf&#xff1a;PHP的XXE 1、打开网页是一个PHP版本页面 2、CTRLf搜索xml&#xff0c;发现2.8.0版本&#xff0c;含有xml漏洞 3、bp抓包 4、使用代码出发bug GET /simplexml_load_string.php HTTP/1.1 补充&#xff1a; <?xml version"1.0" encoding&quo…

内网穿透--Nps-自定义-上线

免责声明:本文仅做技术交流与学习... 目录 Nps项目: 一图通解: 1-下载nps/npc 2-服务端启动 访问web网页: 添加客户端&#xff0c;生成密匙. 3-kali客户端连接服务端 4-添加协议隧道. 5-kali生成后门&#xff1a; 6-kali创建监听: Nps项目: https://github.com/ehang…

蓝桥杯Web开发【模拟题一】15届

1.动态的Tab栏 日常在使用移动端 APP 或访问 PC 端网站的时候&#xff0c;常常发现在一些有工具栏或者 Tab 栏的页面会有顶栏固定的效果。简单来说&#xff0c;在页面未开始滚动时顶栏处在其原有的位置上&#xff0c;当页面向下滚动一定区域后&#xff0c;顶栏会跟随滚动固定在…

HTTPS证书——网站如何实现HTTPS访问?

实现网站HTTPS访问可以简化为以下四个基本步骤&#xff0c;确保过程既通俗易懂又条理清晰&#xff1a; 1. 申请SSL证书 - 目的&#xff1a;SSL证书是实现HTTPS加密的关键&#xff0c;它验证了网站的身份&#xff0c;并提供了加密数据所需的密钥。 - 操作&#xff1a;首先&…

超链接的魅力:HTML中的 `<a>` 标签全方位探索!

&#x1f310;超链接的魅力&#xff1a;HTML中的 标签全方位探索&#xff01; &#x1f3de;️基础营地&#xff1a;认识 <a> 标签&#x1f6e0;️基本语法&#x1f4da;属性扩展 &#x1f680;实战演练&#xff1a;超链接的多样玩法&#x1f308;内链与外链&#x1f4c…

TypeScript(持续更新中...)

1.TypeScript是什么&#xff1f; TypeScript是javaScript的超集。 2.使用TypeScript 1&#xff09;全局安装nodejs 2&#xff09;安装TypeScript编译器 npm i -g typescript 3.编译ts文件 //注意&#xff1a;需要在ts文件同级目录执行此命令&#xff0c;否则会报找不到…

遥感、GIS和GPS技术在水文、气象、灾害、生态、环境及卫生等领域中的应用

【科研必备】遥感、GIS和GPS技术在水文、气象、灾害、生态、环境及卫生等领域中的应用 (qq.com)https://mp.weixin.qq.com/s?__bizMzg2NDYxNjMyNA&mid2247565057&idx4&snecec1f5396132122acf02b188f7b74ac&chksmce6515eaf9129cfc9a6c4a16413c0d746003cc192132…

PostgreSQL 教程

## PostgreSQL 教程 ### 1. PostgreSQL 概述 PostgreSQL 是一个开源的对象关系型数据库管理系统&#xff08;ORDBMS&#xff09;&#xff0c;以其高扩展性和合规性闻名&#xff0c;支持 SQL 和 JSON 查询。 ### 2. 安装与配置 - **下载与安装**&#xff1a;从 PostgreSQL 官方…

C++ Primer Plus第十七章复习题

1、iostream文件在CI/O中扮演这种角色&#xff1f; 答&#xff1a; iostream文件定义了用于管理输入和输出的类、常量和操纵符,这些对象管理用于处理I/O的流和缓冲区。该文件还创建了一些标准对象(cin、cout、cerr和 clog以及对应的宽字符对象)&#xff0c;用于处理与每个程序…

【论文笔记】| 微调LLM晶体生成

【论文笔记】| 微调LLM晶体生成 Fine-Tuned Language Models Generate Stable Inorganic Materials as Text NYU, ICLR 2024 Theme&#xff1a;Material Generation Main work&#xff1a; 微调大型语言模型以生成稳定的材料 可靠性&#xff1a;在样本结构中&#xff0c;90% …

如何修改WordPress网站的域名

我的网站用的是Hostease的虚拟主机&#xff0c;但是域名是之前在其他平台买的&#xff0c;而且已经快到期了&#xff0c;因为主机和域名在不同的平台上&#xff0c;管理不太方便&#xff0c;所以我又在Hostease重新注册了一个域名&#xff0c;然后把网站换成了新的域名&#xf…

(Java企业 / 公司项目)配置Linux网络-导入虚拟机

公司给了我一个IP地址 &#xff0c;提供了一个虚拟机或者自己搭建虚拟机&#xff0c;还有提供登录的账号密码 可以查看我之前的文章 VMware Workstation Pro 17虚拟机超级详细搭建&#xff08;含redis&#xff0c;nacos&#xff0c;docker, rabbitmq&#xff0c;sentinel&…