使用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的 ...
随机推荐
- 2.2.vue用法在uniapp中的使用_
开发的H5页面可以用div,但是适应小程序的用法,得参考uniapp的组件章节,用view包裹.
- j-link "the connected j-link is defective"问题的解决
出现这个原因是 J-link和J-link的驱动不匹配,比如J-link的固件太老,J-link驱动太新.因此要解决的话,要不就是换不同版本的J-link驱动,要不就是换J-Link或升级J-link ...
- C++_bind用法
1.bind函数 网络编程中, 经常要使用到回调函数. 当底层的网络框架有数据过来时,往往通过回调函数来通知业务层. 这样可以使网络层只专注于 数据的收发, 而不必关心业务 在c语言中, 回调函数的实 ...
- 【译】.NET 7 中的性能改进(一)
原文 | Stephen Toub 翻译 | 郑子铭 一年前,我发布了.NET 6 中的性能改进,紧接着是.NET 5..NET Core 3.0..NET Core 2.1和.NET Core 2. ...
- 【白话科普】聊聊网络架构变革的关键——SDN
最近二狗子在网上冲浪的时候,不小心将 CDN 搜索成了 SDN,结果跳出来了一大堆相关的知识点. 好学的二狗子当然不会随随便便糊弄过去,于是认认真真学习了好久,终于了解了 SDN 是什么. 原来,SD ...
- 这些 JavaScript 笔试题你能答对几道?
收藏 javascript-questions 这个仓库很久了,趁着周末来锻炼下自己的 JS 基础水平 因为逐渐也在承担一些面试工作,顺便摘录一些个人觉得比较适合面试的题目和方向 事件流(捕获.冒泡) ...
- 《HelloGitHub》第 83 期
兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...
- unity 音频曲线
jp--------------- https://techblog.kayac.com/dynamic-waveform-generation-without-audio-clip https:// ...
- 如何设置QGraphicsItem线宽不随QGraphicsView缩放而变小或变大
很简单,只需要重写一下Item中的paint()方法 void my_line_item::paint(QPainter *painter, const QStyleOptionGraphicsIte ...
- python3.9不支持win7
安装:Anaconda3-2022.10-Windows-x86_64.exe 会报错:Failed to create Anaconda menus 详细信息:Error loading Pytho ...