使用ts二次封装storage(sessionStorage/localStorage)
export class LocalCache {
setCache<T = any>(key: string, value: T): boolean;
setCache<T = any>(
key: string,
value: T,
localOrSessionStorage: boolean
): boolean;
/**
* 设置缓存
* @param key
* @param value
* @param localOrSessionStorage true => localStorage 默认就是true 如果需要使用sessionStorage 需要传递该参数 false
* @returns
*/
setCache<T = any>(
key: string,
value: T,
localOrSessionStorage = true
): boolean {
try {
const val = JSON.stringify(value);
if (localOrSessionStorage) {
window.localStorage.setItem(key, val);
} else {
window.sessionStorage.setItem(key, val);
}
} catch (error) {
return false;
}
return true;
}
getCache<T = any>(key: string): T;
getCache<T = any>(key: string, localOrSessionStorage: boolean): T;
/**
*
* @param key 获取缓存
* @param localOrSessionStorage
* @returns
*/
getCache<T>(key: string, localOrSessionStorage = true): T {
let res: any;
if (localOrSessionStorage) {
const val = window.localStorage.getItem(key);
if (val) {
res = JSON.parse(val);
}
}
const val = window.sessionStorage.getItem(key);
if (val) {
res = JSON.parse(val);
}
return res as T;
}
deleteCache(key: string): void;
deleteCache(key: string, localOrSessionStorage: boolean): void;
deleteCache(key: string, localOrSessionStorage = true): void {
if (localOrSessionStorage) window.localStorage.removeItem(key);
else window.sessionStorage.removeItem(key);
}
clearCache(): void;
clearCache(localOrSessionStorage: boolean): void;
clearCache(localOrSessionStorage = true): void {
if (localOrSessionStorage) window.localStorage.clear();
else window.sessionStorage.clear();
}
}
// 缓存对象
export default new LocalCache();
来源 :
使用ts二次封装storage(sessionStorage/localStorage)_尤雨东的博客-CSDN博客_ts storage
使用ts二次封装storage(sessionStorage/localStorage)的更多相关文章
- H5的storage(sessionstorage&localStorage)简单存储删除
众所周知,H5的storage有sessionstorage&localStorage,其中他们的共同特点是API相同 下面直接上代码,storage中的存储与删除: <!DOCTYPE ...
- HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例
Web Storage是什么? Web Storage功能,顾名思义,就是在Web上针对client本地储存数据的功能,详细来说Web Storage分为两种: sessionStorage: 将数据 ...
- 浏览器 Web Storage - sessionStorage & localStorage
storage事件 当储存的数据发生变化时,会触发storage事件.我们可以指定这个事件的回调函数. window.addEventListener("storage",onSt ...
- axios 二次封装
一般项目往往要对 axios 库进行二次封装,添加一些自定义配置和拦截器等 案例 ./service/axios.js 1234567891011121314151617181920212223242 ...
- html5 Web Storage(localStorage(),sessionStorage())
Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...
- Web存储机制—sessionStorage,localStorage使用方法
Web存储机制,在这里主要聊有关于Web Storage API提供的存储机制,通过该机制,浏览器可以安全地存储键值对,比使用cookie更加直观.接下来简单的了解如何使用这方面的技术. 基本概念 W ...
- sessionStorage & localStorage & cookie
sessionStorage & localStorage & cookie 概念 html5中的Web Storage包括了两种存储方式:sessionStorage和localSt ...
- 本地缓存下载文件,download的二次封装
来源:http://ask.dcloud.net.cn/article/524 源码下载链接 说明: (1)由于平时项目中大量用到了附件下载等功能,所以就花了一个时间,把plus的downlaod进行 ...
- session,cookie,sessionStorage,localStorage的区别及应用场景
session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟 ...
- 缓存session,cookie,sessionStorage,localStorage的区别
https://www.cnblogs.com/cencenyue/p/7604651.html(copy) 浅谈session,cookie,sessionStorage,localStorage的 ...
随机推荐
- easyUI实现查询条件传递给后端并自动刷新表格的两种方法
easyUI实现查询条件传递给后端并自动刷新表格的两种方法 用ajax的post函数传递参数,再通过loadData方法将数据初始化到表格中 js代码: //根据id搜索 $("#stand ...
- 关于Powerlink和EtherCAT的对比
https://www.amobbs.com/thread-5679636-1-2.html 转发自:http://book.2cto.com/201508/55093.html 这个问题经常会被人问 ...
- ABAP 辨析ON INPUT|REQUEST|CHAIN-INPUT|CHAIN-REQUEST
1.逻辑流 在屏幕开发中,存在如下逻辑流: PBO(Process Before Output):屏幕输出之前触发 PAI(Process After Input):用户在屏幕中执行操作触发 POH( ...
- JavaScript 中的 apply、call、bind
在 JavaScript 中,apply.call.bind 是三个与函数调用相关的方法,它们都允许你在调用函数时手动设置函数的上下文(即 this 指向). 1.apply 方法:apply 方法允 ...
- 【KAWAKO】MobaXterm-使用MobaSSHTunnel进行端口映射
目录 在Tools中打开MobaSSHTunnel(port forwarding) 点击New SSH tunnel 配置信息 点击运行 访问端口 在Tools中打开MobaSSHTunnel(po ...
- 3D建模零代码平台
近几年,随着国内外文化产业的迅猛发展,3D建模行业迎来黄金发展期. 尤其是在元宇宙时代及数字体验经济时代的大背景下,越来越多的实时.可交互的3D内容将出现在人们的生活中. 关于3D建模师而言,无疑,行 ...
- Python:Excel自动化实践入门篇 乙【送图书活动继续】
*以下内容为本人的学习笔记,如需要转载,请声明原文链接微信公众号「englyf」https://mp.weixin.qq.com/s/y-npGelPJwmx3iNvHaXRTg 本文上接<Py ...
- LeetCode-1669 合并两个链表
来源:力扣(LeetCode)链接:https://leetcode.cn/problems/merge-in-between-linked-lists 题目描述 给你两个链表 list1 和 lis ...
- 论文学习 Dilated Inception U-Net (DIU-Net) for Brain Tumor Segmentation 1
好记性不如烂笔头 边学习边记录1 主题:脑肿瘤分割 使用基于Unet的端到端的网络结构,在扩张和紧缩路径中加入了Inception模块和空洞卷积. 数据集:Tumor Segmentation (Br ...
- axios 进行同步请求(async+await+promise)
axios 进行同步请求(async+await+promise) 遇到的问题介绍 将axios的异步请求改为同步请求想到了async 和await.Promise axios介绍 Axios 是一个 ...