前端存储只会用localStorage？可以试试这个!

前言

前端很多应用场景用 localStorage 搭配 JSON.stringify 存储数据可能已经够用了。但是如果要存储的数据量太大，又或者是你遇到这样的对象要存储：

const data = {
   
    a: undefined,
    b: NaN,
    c: Infinity,
    d: new Date(),
}

localStorage.setItem('data', JSON.stringify(data))

console.log(localStorage.getItem('data'))
// 输出为：{"b":null,"c":null,"d":"2022-11-17T05:08:49.766Z"}
// a属性丢失，b、c变为了null，d变为了字符串

data.e = data
localStorage.setItem('data', JSON.stringify(data))
// 自引用object在JSON.stringify时会直接报错

这样，localStorage是不是就不管用了。接下来介绍一个新的存储方案——indexedDB，它也是永久性存储，并且原生支持对象、Date、undefined、NaN、Infinity、以及自引用 object 的读写，并且其存储空间远大于localStorage。

可能了解indexedDB的就要说了，虽然indexedDB很好用，但是它操作起来太繁琐了。因此，今天不是介绍indexedDB（indexedDB使用教程在我的这篇文章里介绍了：[TypeScript]前端存储方案介绍及IndexedDB的使用封装 - 掘金 (juejin.cn)）。

下面介绍主角： @wzdong/idb ，这是本人基于indexedDB封装实现的，它用起来就像localStorage一样简单。代码已完全开源且发布在npm上，可直接下载调用。

• github开源地址：https://github.com/wzdong26/-wzdong/tree/main/idb（欢迎Star🌟）
• 下载：npm i @wzdong/idb

使用示例如下：
代码片段

以下是 @wzdong/idb 包的介绍

📙 写在前面：

如果你不满足于 localStorage 的存储容量或是其支持的数据格式，可以试试 indexedDB ，如果你觉得 indexedDB 使用起来操作繁琐，那你不妨来试试 @wzdong/idb，试过了就知道它有多么好用，让你像操作 localStorage 那么简单的操作 indexedDB！😜😜

1. 这是一个基于 indexedDB 封装实现的 npm package