大屏性能优化-数据存储IndexedDB(localForage)

最近遇到大屏上的性能问题，发现页面占用内存动不动就是1.8G，页面放置一会浏览器就会自动刷新，原因应该是浏览器的内存占用太大了，浏览器主动释放掉导致的重新刷新。随后为了解决这个问题，发现了占用内存比较的大的代码在地图上；由于地图上要加载非常多的图层，并且图层中的数据量非常大，有整个城市的楼宇覆盖面，小区覆盖面等等，这些数据量还是比较大的，这些存在前端比较占内存，于是寻找到了一种解决办法，利用IndexedDB这种技术将数据存下来，不再利用创建内存变量将数据存下来。

IndexedDB是一种浏览器内建的数据库技术，它允许在客户端（即浏览器端）存储大量的结构化数据。与传统的 cookie 或 Web Storage（localStorage 和 sessionStorage）相比，IndexedDB 提供了更强大的功能，支持更大容量的存储、更复杂的数据结构、异步访问等。

文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/indexedDB

主要特点

1. 异步操作：IndexedDB 使用异步 API 操作，避免了阻塞浏览器主线程的情况。这样可以提高页面的响应速度，避免数据存取时的卡顿。

2. 结构化存储：它不仅支持简单的键值对存储，还支持对象存储，可以存储 JavaScript 对象和数组。数据存储是基于对象存储的概念，而不是传统的表格（如关系型数据库）。

3. 事务管理：IndexedDB 支持事务，确保数据在操作过程中的一致性和完整性。如果一个事务中的某些操作失败，整个事务会被回滚。

4. 大容量存储：IndexedDB 允许存储大量数据，存储空间通常比 localStorage 更大，可以达到几百 MB 或更高，具体取决于浏览器的限制。

5. 索引支持：可以为数据创建索引，以加速数据的查询操作。这使得在大量数据中检索变得更加高效。

优缺点

优点：

• 可以存储大量数据，适合离线应用。
• 支持复杂的数据结构，如对象、数组等。
• 支持事务，确保数据一致性。
• 支持异步操作，避免阻塞主线程。

缺点：

• API 相对较复杂，操作较为繁琐。
• 不同浏览器的实现可能会有差异，需要做兼容性处理。
• 查询操作有时不如关系型数据库高效。

由于IndexedDB的API较为复杂，需要一定的学习成本去学习，为了能够快速解决将数据存到IndexedDB中，这里推荐一个存储库localForage，这个库的用法与localStorage和sessionStorage比较相似，使用起来很方便，上手也快。

localForage库地址：https://localforage.docschina.org/

安装localForage库

pnpm install localForage

使用

创建IndexedDB - createInstance

import localforage from "localforage";

export const createIndexedDB = (name) => {
    return localforage.createInstance({name: 'MapDB',storeName:name})
};

let indexedDB = null
onMounted(()=>{
  indexedDB = createIndexedDB('myIndexed')
})

存值IndexedDB - setItem

//存储方式与localStorage一样，key-value的形式
let textData = [大量数据]
indexedDB.setItem('communityLayerArr',textData)

取值IndexedDB - getItem

//取值是异步的，可以使用then获取，也可以async await
indexedDB.getItem('communityLayerArr').then(res=>{
    console.log(res,'res')
})

删除IndexedDB - removeItem

//清除对应key的数据
indexedDB.removeItem('communityLayerArr')

清空数据库IndexedDB - clear

//会把所有的数据都清除
indexedDB.clear()

可以看到，我将结构复杂的大批量经纬度范围数据存到了IndexedDB中；利用localForage库可以将IndexedDB的用法简单化。