二次封装Storage的第一要素是什么?很多人其实都不知道~

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

二次封装 Storage?

关于 Storage 的封装问题,其实都是老生常谈了,很多人都会在项目中去二次封装 Storage,为了让开发者能更加方便地去使用 localStore、sessionStorage

就比如下方,应该是很多人封装的案例,就是封装简单的 读取、写入,或者有 删除、清空

我们为什么封装?

要不我们回过头来想一下,我们为什么要封装?其实封装无非就是为了两个目的:

  • 更好地统一维护
  • 使用者更方便、更无脑地使用

但是我觉得在一个大项目中以及紧急的开发进度中,使用者更方便、更无脑地使用才是封装的第一目的

所以想想刚刚的 LocalStorage 的封装,真的能让使用者更方便、更无脑地使用吗?

我就举个例子吧,我想存进去一个对象,我这么去存,可以吗?

显然是不行的,存进去的对象会被转成字符串 [object Object]

所以我必须这么去存和取值,利用 JSON.parse、JSON.stringify 去转

只有这么去做才能达到我的目的

但是这样不觉得很麻烦吗?使用者更方便、更无脑地使用是封装的第一目的,显然这样只会让使用者徒增烦恼!!!

有的人就说了,可以把 JSON.parse、JSON.stringify 写在 useLocalStorage 中,但是这个方案只是针对 Object 而已,但是数据类型其实有多种:number、string、object、set、map、date 等等,你直接写在里面,不太合理,你得兼顾所有的数据类型才行!!

类型猜测逻辑

所以呢,你如果想要让使用者更方便、更无脑地使用,我们可以封装一套类型猜测逻辑

首先我们必须准备一个函数,这个函数用来判断数据类型

但是光是判断出类型还不够啊,我们还必须给每一种类型,准备一套 读取、存入 的策略

最后只需要:

  • 判断类型
  • 获取类型对应的存取策略
  • 在存取的时候执行对应策略

我们现在可以来试试能不能达到目的

显然已经达到我们想要的效果

结语 & 加学习群 & 摸鱼群

我是林三心

  • 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手;
  • 一个偏前端的全干工程师;
  • 一个不正经的掘金作者;
  • 一个逗比的B站up主;
  • 一个不帅的小红书博主;
  • 一个喜欢打铁的篮球菜鸟;
  • 一个喜欢历史的乏味少年;
  • 一个喜欢rap的五音不全弱鸡

如果你想一起学习前端,一起摸鱼,一起研究简历优化,一起研究面试进步,一起交流历史音乐篮球rap,可以来俺的摸鱼学习群哈哈,点这个,有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点

相关推荐
一拳不是超人25 分钟前
Electron主窗口弹框被WebContentView遮挡?独立WebContentView弹框方案详解!
前端·javascript·electron
anyup34 分钟前
🔥2026最推荐的跨平台方案:H5/小程序/App/鸿蒙,一套代码搞定
前端·uni-app·harmonyos
雮尘1 小时前
如何在非 Claude IDE (TARE、 Cursor、Antigravity 等)下使用 Agent Skills
前端·agent·ai编程
icebreaker1 小时前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序
icebreaker1 小时前
重走 Vue 长征路 Weapp-vite:编译链路与 Wevu 运行时原理拆解
前端·vue.js·微信小程序
wuhen_n1 小时前
代码生成:从AST到render函数
前端·javascript·vue.js
喝咖啡的女孩1 小时前
浏览器前端指南
前端
wuhen_n1 小时前
AST转换:静态提升与补丁标志
前端·javascript·vue.js
喝咖啡的女孩1 小时前
浏览器前端指南-2
前端
cxxcode1 小时前
从 V8 引擎视角理解微任务与宏任务
前端