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，开发时爽畅至极，没有任何使用上的心智负担。

如何使用

已发布为 npm 包，请查看 www.npmjs.com/package/dz-… 使用文档。

实现思路

开发的初衷很明确：简单好用，极致纯粹！所以 1:1 实现 localStorage api 用法，只增强它自带的功能。思路也很简单，就是根据数据的类型进行相应的处理，具体的实现可以看源码 。

作者：dizuncainiao
链接：https://juejin.cn/post/7311876701910908937