ts版操作localStorage和sessionStorage工具

ts版localStorage和sessionStorage工具,存储的大多数是json，转来转去的麻烦，直接自带自动序列化json功能

interface StorageInterface {//设置localStorageset: (key: string, value: any) => void;//获取localStorage,默认会自动转jsonget: (key: string, isJson?: boolean) => string | Record<any, any>;//是否含有keyhas: (key: string, isJson?: boolean) => boolean;//移除remove: (key: string) => void;
}interface SessionStorageInterface extends StorageInterface {//提供session操作接口session: StorageInterface;
}const storage: SessionStorageInterface = {} as SessionStorageInterface;//加方法
const extend = (s: Storage): StorageInterface => {return {set(key, value) {if (typeof value == "object") {s.setItem(key, JSON.stringify(value));} else {s.setItem(key, value);}if (value == undefined || value == null) {s.removeItem(key);}},get(key, isJson = true) {const item = s.getItem(key) as string;try {if (isJson) {let ret =  JSON.parse(item);//JSON.parse 可以转基本类型，不报错。。。，所以这里判断一下if (typeof ret !== 'object') {return undefined;}return ret;}} catch (e) {//解析出错,则证明不是json字符串，返回undefinedreturn undefined;}return item;},has(key,isJson=false) {return !!(this.get(key,isJson) as string | Record<any, any>);},remove: (key) => {s.removeItem(key);},};
};Object.assign(storage, extend(window.localStorage));
Object.assign(storage, {session: extend(window.sessionStorage),
});export default storage;

ts版操作localStorage和sessionStorage工具相关推荐

HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
本地存储三种方式cookie、localStorage、sessionStorage的详细介绍
前言网页刷新的时候数据会被清空,这时候就需要用到存储技术.前端本地存储的方式有三种,分别是cookie.localStorage.sessionStorage.在前端面试过程中,经常会被问及这些存储 ...
H5存储------localStorage和sessionStorage
web现在随着计算机的高速发展,客户端干的事情越来越多了,随着事情的增多,很多东西存储就不止在服务器了,本地存储越来越强大了(大神原谅我废话了????) 早期时期 cookie存储 (之前我用着还是很 ...
Cookie, LocalStorage 与 SessionStorage异同
不同 cookie由服务端生成,用于标识用户身份:而两个storage用于浏览器端缓存数据一般情况下浏览器端不会修改 cookie,但会频繁操作两个storage cookie有path概念,子路径 ...
Web数据存储之localStorage和sessionStorage
Web数据存储之localStorage和sessionStorage 学习前端以来,自己了解有localStorage和sessionStorage的相关存储的知识,也有实践过,但是之前只限于能用的 ...
Vue项目代码改进（三）—— Cookie、LocalStorage和SessionStorage的使用
存在问题: 如果在退出页面时,没有点击"退出"按钮,而是直接关闭页面,token并没有被清除,依然能通过访问http://localhost:8080/#/ 直接进入主页. 原因: ...
解决浏览器存储问题，不得不了解的cookie,localStorage和sessionStorage
浏览器存储方式一.浏览器存储的方式二.cookie.localStorage和sessionStorage 1.cookie.localStorage和sessionStorage是什么? (1) ...
Intellij IDEA 社区版集成 Database Navigator 数据库管理工具
Intellij IDEA 社区版集成 DB Navigator数据库管理工具第一步:打开IDEA, Intellij IDEA -> Preferences -> Plugins 第二 ...
LocalStorage与SessionStorage
localStorage与sessionStorage localStorage和sessionStorage是HTML5提供的对于Web存储的解决方案. 相同点都与HTTP无关,是HTML5提供的 ...
localStorage、sessionStorage详解，以及storage事件使用
有关localStorage和sessionStorage的特性. localStorage本身带有方法有添加键值对:localStorage.setItem(key,value),如果key存在时 ...

ts版操作localStorage和sessionStorage工具

ts版操作localStorage和sessionStorage工具相关推荐

最新文章

热门文章