Html5 IndexedDB 初体验一个隐藏在浏览器里的MongoDB

home 编辑时间 2021/06/07

![](/api/file/getImage?fileId=60bdd10716199b501c025980)
 
## 前言
简单说下纯前端如果想缓存数据有哪些方法
`Session` 、`Cookie` 、`Web Storage` 、`Web SQL` 、`IndexedDB`
 
先说下 `Session` ，这和 `Session Storage` 不是同一个东西，这是一个古老的前后端交互的缓存数据方案，上古时期几乎没有前端缓存的概念，就是每个用户访问，都会在服务器开一个特定的内存区域，缓存用户信息，短时间内用户访问同域名不同页面的多次请求都可以从服务器内存中读取到 `Session` 数据，用户离开后一段时间则会清除这部分数据。先抛开安全问题不考虑，仅是效率就非常低，本方法已逐渐淘汰中
 
`Cookie` 和 `Web Storage` 这2个功能比较接近，`Web Storage` 包括 `Local Storage` 和 `Session Storage`，分别对应永久存储和临时存储。都是浏览器本地进行数据缓存，且都是通过 `js` 代码缓存字符串类型的数据。`Cookie` 的优势是可以设置过期时间，但 `Cookie` 最大只能支持到几kb, 相比于 `Cookie` ， `Web Storage` 可存储空间更大，纯前端代码实现也更方便。
 
如果你看到这里有点懵圈，不记得什么是 Web Storage 这里用几行代码简单描述一下
```javascript
localStorage.setItem (key, value); // 保存数据
localStorage.getItem (key); // 获取数据
localStorage.removeItem (key); // 删除数据
```
 
`Web SQL` 已废弃不推荐
 
`IndexedDB` 就是今天的重头戏，他是 `Web Storage` 的超级加倍升级版本。支持了异步，支持了超大存储容量，且可以根据版本控制数据，增删改查都有事务可以确保一致性。
 
**一句话总结 `Web Storage` 和 `IndexedDB`都是纯前端的 `NoSql`**
**`Web Storage` 更像是 `Redis`**
**`IndexedDB` 更像是 `MongoDB`**

## 折腾
浏览器支持情况参考这个地址，除了智障IE，其余全部支持
[https://caniuse.com/indexeddb](https://caniuse.com/indexeddb)

## END
参考
[https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB)
[https://www.ruanyifeng.com/blog/2018/07/indexeddb.html](https://www.ruanyifeng.com/blog/2018/07/indexeddb.html)

送人玫瑰,手留余香