使用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的 ...
随机推荐
- Makefile常用命令
# 下面用来定义变量并赋值 # := 和 = 一样的吗? # 这里?=代表如果变量已经赋值了,不要重新赋值,而是保留原来的值 CROSS_COMPILE ?= arm-linux-gnueabihf- ...
- 一文搞懂 DevOps
前言 DevOps作为一个热门的概念,近年来频频出现在各大技术社区和媒体的文章中,备受行业大咖的追捧,也吸引了很多吃瓜群众的围观. 那么,DevOps是什么呢? 有人说它是一种方法,也有人说它是一种工 ...
- React Hooks的理解,React Hooks有哪些,解决了什么问题
一.是什么 Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 至于为什么引入hook,官方给出的动机是解决长时间使 ...
- 关于Promise.all()的理解
本篇笔记是抄的别人的,目的只是为了日后有用到时有个参考,原文地址是https://www.jianshu.com/p/7e60fc1be1b2 一.Pomise.all的使用 Promise.all可 ...
- wwise 音频引擎介绍
https://blog.csdn.net/GJQI12/article/details/108007696
- ImGui引入深度测试的方法
You can use AddCallback() on a given ImDrawList:: to register functions to be run during rendering a ...
- Ubuntu 安装 PHP
Ubuntu版本:20.04.1 LTS PHP版本:8.2.3 下载地址: https://www.php.net/downloads 官方文档:https://www.php.net/manual ...
- react零基础使用react-redux管理状态全过程(单组件)
首先下载react-redux插件 yarn add react-redux 或 npm add react-redux 然后创建一个容器组件Container connect(mapStateTo ...
- python spacy [E050] Can't find model 'en_core_web_sm'
出现问题 [E050] Can't find model 'en_core_web_sm' 使用管理员权限打开shell控制台,输入命令 python -m spacy download en_cor ...
- 解决Hbuliderx的代码不能自动补全的问题
1.先关掉HBuilder X编辑器 2.找到安装目录下的reset.bat 3.点击reset.bat,提示"确认清除HBuilder X的所有配置吗? 按任意键回车继续,或输入N回车退出 ...