二次封装 Storage?
关于 Storage 的封装问题,其实都是老生常谈了,很多人都会在项目中去二次封装 Storage,为了让开发者能更加方便地去使用 localStore、sessionStorage。就比如下方,应该是很多人封装的案例,就是封装简单的 读取、写入,或者有 删除、清空。
我们为什么封装?
要不我们回过头来想一下,我们为什么要封装?其实封装无非就是为了两个目的:
1.更好地统一维护
2.使用者更方便、更无脑地使用
但是我觉得在一个大项目中以及紧急的开发进度中,使用者更方便、更无脑地使用才是封装的第一目的,所以想想刚刚的 LocalStorage 的封装,真的能让使用者更方便、更无脑地使用吗?我就举个例子吧,我想存进去一个对象,我这么去存,可以吗?
![](https://img.duidaima.com/PorkBelly/Article/Big/3f07e59c-1d41-4879-b3ba-6c22d100bd67.png)
显然是不行的,存进去的对象会被转成字符串 [object Object]
![](https://img.duidaima.com/PorkBelly/Article/Big/685e752f-9f0e-444d-8e1e-c40d3b5abbcb.png)
所以我必须这么去存和取值,利用 JSON.parse、JSON.stringify 去转
![](https://img.duidaima.com/PorkBelly/Article/Big/5f1537f0-20da-4f46-841e-2307709ef542.png)
只有这么去做才能达到我的目的
![](https://img.duidaima.com/PorkBelly/Article/Big/9da07263-f89c-4f1e-af28-f2b95e42b77a.png)
但是这样不觉得很麻烦吗?使用者更方便、更无脑地使用是封装的第一目的,显然这样只会让使用者徒增烦恼!!!有的人就说了,可以把 JSON.parse、JSON.stringify 写在 useLocalStorage 中,但是这个方案只是针对 Object 而已,但是数据类型其实有多种:number、string、object、set、map、date 等等,你直接写在里面,不太合理,你得兼顾所有的数据类型才行!!
类型猜测逻辑
所以呢,你如果想要让使用者更方便、更无脑地使用,我们可以封装一套类型猜测逻辑
首先我们必须准备一个函数,这个函数用来判断数据类型
![](https://img.duidaima.com/PorkBelly/Article/Big/b5bcecdb-47d3-45d9-a54e-ee8a3a7648e8.png)
但是光是判断出类型还不够啊,我们还必须给每一种类型,准备一套 读取、存入 的策略
![](https://img.duidaima.com/PorkBelly/Article/Big/11064f25-541b-4641-abeb-6f2303908c50.png)
最后只需要:
1.判断类型
2.获取类型对应的存取策略
3.在存取的时候执行对应策略
![](https://img.duidaima.com/PorkBelly/Article/Big/fc358401-cc8d-49b5-bf60-7f37b4626e16.png)
我们现在可以来试试能不能达到目的
![](https://img.duidaima.com/PorkBelly/Article/Big/f7716ca0-a51a-43f3-aee4-4b145742b02d.png)
显然已经达到我们想要的效果
小结
当然, Storage 的封装不仅仅是类型猜测这么一个功能点!而且其实封装还有很多兜底的情况我这里没写出来,本文就是想让大家知道,封装 Storage 的时候,类型猜测是一个最基本的功能,有这个功能,使用者更方便、更无脑地使用。