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 用法，只增强它自带的功能。思路也很简单，就是根据数据的类型进行相应的处理，具体的实现可以看源码 。
原文链接：https://juejin.cn/post/7311876701910908937 作者：dizuncainiao
