构思3年，巨 TM 好用的 localStorage 封装！！！

news2024/10/6 16:25:00

localStorage 和 sessionStorage 作为一个本地存储方案，所有的操作都是同步的，用法也非常简单，所以深受广大前端的喜爱。

但是由于 localStorage 只能存储字符串，所以存储其他数据就比较麻烦。比如我们要存储一个对象的话可能需要这样才行：

const data = { name: 'zhangsan', age: 18 }
// 存
localStorage.setItem('data', JSON.stringify(data))
// 取
JSON.parse(localStorage.getItem('data'))

在日常的开发中这样的代码应该会有很多，虽然只有三两行，但是写多了估计也挺烦。最近花时间封装了一下，localStorage 能存储的它能存储，localStorage 不能存储的，它也能存储，并且即取即用，不需要任何转换。封装后的产物分别为：localStore 对应 localStorage，sessionStore 对应 sessionStorage，下面来看一下它的用法和实际表现。

1. 存取 object

看代码：

const data = { name: 'zhangsan', age: 18 }

localStore.set('data', data)

localStore.get('data') // {name: 'zhangsan', age: 18}

用法简单，即取即用，不需要任何转换，并且 {name: 'zhangsan', age: 18} 取到的就是一个对象。

在这里插入图片描述

2. 存取 boolean、number

众所周知，localStorage 存储 boolean 和 number 时会进行 toString() 转换，所以我们看下以下代码：

localStorage.setItem('b', true)
localStorage.setItem('n', 1000)

localStorage.getItem('b') // 'true'
localStorage.getItem('n') // '1000'

可以看到，我们只能获取到字符串 'true' 和 '1000'，需要进行一系列的转换才能正常使用。看下封装后的表现：

在这里插入图片描述

即取即用，不需要任何转换。

3. 存储 undefined、null

localStorage.setItem('u', undefined)

localStorage.getItem('u') // 'undefined'

localStorage.setItem('n', null)

localStorage.getItem('n') // 'null'

可以看出跟上述一样的表现，看下封装后的表现：

在这里插入图片描述

4. 存储 NaN

localStorage.setItem('n', NaN)

localStorage.getItem('n') // 'NaN'

看下封装后的表现：
在这里插入图片描述

NaN 更多的是被动生成的，而不是主动创建的，没什么用，但是这里也给它封装了下，聊胜于无。

需要注意的是：由于 JSON.stringify({n: NaN}) 的值是 '{"n":null}'，所以尽量避免存储对象内的 NaN ，当然这种场景几乎没有。

5. 存储 Set（localStorage：😨）

const s = new Set()

s.add(1)
s.add('12')
s.add(true)
s.add({name: 'zhangsan'})
s.add([1,2,3,4,5])

localStorage.setItem('s', s)

localStorage.getItem('s') // '[object Set]'

看下封装后的表现：

在这里插入图片描述

6. 存储 Map（localStorage：😰）

const m = new Map()
m.set('foo', '123')
m.set('foo2', {name: '123'})
m.set('foo3', ['123'])
m.set('foo4', 123)
m.set('foo5', true)

localStorage.setItem('m', m)
localStorage.getItem('m') // '[object Map]'

看下封装后的表现：

在这里插入图片描述

7.存储 bigint（localStorage：🥶）

localStorage.setItem('b', 12345678901234567890123456789n)

localStorage.getItem('b') // '12345678901234567890123456789'

bigint 类型变成了字符串 '12345678901234567890123456789'，不能直接用，看下封装后的表现：

在这里插入图片描述

8. 存储 Symbol（localStorage：😭）

在这里插入图片描述

localStorage 存储 symbol 类型值会直接报错，它甚至不能像存储 undefined 那样自动转换一下。虽然我们可以使用 toString 手动转换一下，得到一个字符串 'Symbol(这是一个唯一值)' ，但是无论如何也无法基于字符串还原一个具有唯一值特性的 symbol 值。

难道 symbol 这种特殊类型的值真的不能进行本地存储吗？😬😬

在这里插入图片描述

看下封装后的表现：

在这里插入图片描述

localStorage：😲😲 what ？？你吖的是基于我封装的吗？

在这里插入图片描述

localStore：天地良心，我真的是基于您老人家封装的😋😋

通过上述代码图例所示，localStore 成功实现了特殊类型 symbol 的数据存取，并且 100% 基于 localStorage 的纯原生封装。

localStorage：🤔🤔 那它保证 symbol 类型值的 唯一性 吗？毕竟我只能存储 string 类型的数据。

可以的，我们再来看下封装后的表现：

在这里插入图片描述

没错，它们的值是完全相等的。

至此，我们展示了 string、number、boolean、null、undefined、NaN、object、Set、Map、bigint、symbol 多达 11 种数据类型的本地存储表现，并且还 1:1 实现 localStorage api 用法，100%的同步写法，无 async 、await，开发时爽畅至极，没有任何使用上的心智负担。