九、IndexedDB前端缓存

前言

在通才 3D 数字工厂项目中，由于场景文件（glb 资源文件）过大，并且每次加载页面时，glb 文件都会被重新加载，造成页面加载缓慢，最后通过保存生成 Blob 格式存储到 IndexedDB 中，增加文件缓存，减少资源重复加载。

为什么需要 IndexedDB

随着前端技术的发展和浏览器功能的不断增强，越来越多复杂的交互和业务需求需要前端来实现，其中一种常用的优化方式就是本地存储数据，减少从服务器获取数据，直接从本地获取数据也能提高页面渲染的速度。但先前的数据储存方案都不适合储存大量结构化数据，如 localStorage 容量通常在 10MB 以内（各家浏览器不同），储存的格式数据也有限，且不提供搜索功能，不能建立自定义的索引；因此需要一种新的解决方案，那就是 IndexedDB。

IndexedDB 是什么

IndexedDB 就是浏览器提供的本地数据库，它提供了一些底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象），并提供查找接口，还能建立索引。

IndexedDB 的特点

• 键值对储存。IndexedDB 内部采用对象仓库存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有