首页 > 其他分享 >localStorage和sessionStorage存储封装

localStorage和sessionStorage存储封装

时间:2024-11-16 14:41:04浏览次数:1  
标签:const sessionStorage storage value prop createStorageProxy localStorage obj 封装

const createStorageProxy = (target = {}, type: 'local' | 'session') => {
  const storage = type === 'local' ? localStorage : sessionStorage;
  return new Proxy(target, {
    get(obj: Record<string, any>, prop: string) {
      const value = storage.getItem(prop);
      return value !== null ? JSON.parse(value) : obj[prop];
    },
    set(obj: Record<string, any>, prop: string, value: any) {
      if (value === undefined) {
        storage.removeItem(prop);
      } else {
        storage.setItem(prop, JSON.stringify(value));
      }
      obj[prop] = value;
      return true;
    },
  });
};

export const LocalStorage = createStorageProxy({}, 'local');
export const SessionStorage = createStorageProxy({}, 'session');

使用方法:

存:

LocalStorage.userInfo = {
  name: 'Ysera'    
}

  

标签:const,sessionStorage,storage,value,prop,createStorageProxy,localStorage,obj,封装
From: https://www.cnblogs.com/yseraaa/p/18549351

相关文章

  • [Python学习日记-67] 封装
    [Python学习日记-67]封装简介如何隐藏类中的属性封装并不是单纯意义的隐藏封装与扩展性特性(property)简介        从封装本身的意思去理解,封装就好像是拿来一个麻袋,把小猫、小狗、小王八和小猪一起装进麻袋,然后把麻袋封上口子。照这种逻辑看,封装起来的麻袋相当......
  • C++:基于红黑树封装map和set
    红黑树的修改想要用红黑树封装map和set,需要对之前实现的key-value红黑树进行修改,因为map是key-value结构而set是key结构,之前实现的红黑树不能满足需求。我们需要将key和key-value抽象统一成成一个类型T,需要修改红黑树节点类和红黑树类进行。红黑树节点enumColor{ RED, ......
  • 为什么 Vue3 封装 Table 组件丢失 expose 方法呢?
    在实际开发中,我们通常会将某些常见组件进行二次封装,以便更好地实现特定的业务需求。然而,在封装Table组件时,遇到一个问题:Table内部暴露的方法,在封装之后的组件获取不到。代码展示为:constMyTable=defineComponent({name:'MyTable',props:ElTable.props,emits:......
  • KBL410-ASEMI整流桥KBL410参数、封装、尺寸
    编辑:llKBL410-ASEMI整流桥KBL410参数、封装、尺寸型号:KBL410品牌:ASEMI封装:KBL-4正向电流:4A反向电压:1000V引脚数量:4芯片个数:4芯片尺寸:50MIL漏电流:>10ua恢复时间:>2000ns浪涌电流:200A芯片材质:GPP硅芯片正向电压:1.10V封装尺寸:如图特性:整流桥、插件桥堆工作结温:-50℃~......
  • python自动化之selenium 封装
    fromseleniumimportwebdriverfromtimeimportsleepclasscms(object):definit(self):passdefdl(self):self.dx=webdriver.Chrome()self.dx.get("http://cms.duoceshi.cn/manage/login.do")self.dx.find_element_by_name("userAccount&qu......
  • windows 自己封装库 并且使用
    环境VisualStudio2022代码编辑创建工程hellohello.cpp#include<iostream>#include"hello.h"//定义函数原型,该函数将在DLL中被导出extern"C"__declspec(dllexport)intAdd(inta,intb){std::cout<<"Thevalueofais:"<&l......
  • 鸿蒙 next 使用并封装富文本 hp-richtext
    鸿蒙next使用并封装富文本hp-richtext使用鸿蒙第三方富文本(https://ohpm.openharmony.cn/#/cn/detail/@ohasasugar%2Fhp-richtext),并再将其包一层实现自己的富文本组件,这样的好处是以后可以自己再里面添加一下逻辑,或者以后可以更换成其他的富文本组件。import{HPRichTe......
  • 【进阶系列】带你看懂python的面向对象编程#类 #对象 #继承 #封装 #多态
    进阶系列一、面向对象编程1.1面向过程与面向对象1.1.1面向过程pop:1.1.2面向对象oop:1.2类、对象1.2.1类的定义与实例化对象1.2.2访问属性/方法1.2.3对象与类的关系1.2.5⭐魔方——构造函数与析构函数1.2.6⭐类属性/方法与实例对象属性/方法与静态方法小练习1......
  • Python中的面向对象编程,类,对象,封装,继承,多态
    一、面向对象编程1.面向过程和面向对象面向过程和面向对象都是一种编程方式,只不过再设计上有区别。面向过程C语言细分成每一个过程优点:简单直观、性能高效、代码简洁。缺点:不易维护、不易扩展、代码重用性低。面向对象python、java、C++要使用某个功能,直接找到对应的......
  • Android运行时请求权限封装
    @目录1介绍2测试用例设计3实现4用例测试5总结本文目的:“借助透明Activity封装一个易于调用的权限请求模块”1介绍Android权限的校验和申请比较简单,但在实际项目中使用时还要进行系统版本的适配,最不友好的是权限的申请结果需要在onRequestPermissionsResult中进行判断,如......