深入探究：测量 IndexedDB 存储空间大小

随着 Web 应用程序越来越复杂，本地存储的需求也在不断增加。IndexedDB 作为一款强大的浏览器内置数据库，为开发者提供了存储大量结构化数据的能力，尤其适用于处理二进制数据和实现离线功能。然而，由于其存储空间并非无限，了解并测量 IndexedDB 的使用情况至关重要。本文将详细介绍如何获取 IndexedDB 存储空间大小，涵盖理论原理、计算方法以及应对复杂数据结构的技巧。

一、理解 IndexedDB 存储限额

在探讨测量方法前，先了解一下 IndexedDB 存储空间的基本限制：

浏览器默认限额： 不同浏览器对 IndexedDB 的存储空间有不同的默认限额，通常在几十兆到几百兆字节之间。例如，Chrome 的初始限额约为 50MB，而 Firefox 可能更高。这些限额会随浏览器版本更新而变动，且用户可在浏览器设置中自行调整。
用户设置： 用户可以根据自身需求调整对特定网站或所有网站的存储限额。这意味着实际可用存储空间可能小于浏览器的默认限额。
域名/源限制： 浏览器通常为每个不同的域名或源（origin）设置独立的存储配额。这意味着即使在同一浏览器中，不同网站的 IndexedDB 存储空间也是隔离的。

二、直接查询 IndexedDB 存储空间

虽然浏览器并未直接提供查询 IndexedDB 总体大小的 API，但我们可以通过遍历数据并累加记录大小来估算。以下是一个逐步详解的计算过程：

步骤一：打开数据库

使用 indexedDB.open() 方法打开指定的数据库。

vue 复制代码

const request = indexedDB.open("yourDatabaseName", <your_database_version>)
request.onsuccess = function(event) {
    this.db = event.target.result
}

步骤二：定义记录大小计算函数

vue 复制代码

    async calculateDatabaseSize() {
      return new Promise((resolve, reject) => {
        let totalSize = 0
        const calculateObjectStoreSizePromises = Array.from(
          this.db.objectStoreNames
        ).map((objectStoreName) => {
          const objectStore = this.db
            .transaction([objectStoreName], 'readonly')
            .objectStore(objectStoreName)
          return this.calculateObjectStoreSize(objectStore)
        })
        Promise.all(calculateObjectStoreSizePromises)
          .then((objectStoreSizes) => {
            totalSize = objectStoreSizes.reduce((acc, size) => acc + size, 0)
            resolve(totalSize)
          })
          .catch((error) => reject(error))
      })
    },
    calculateObjectStoreSize(objectStore) {
      return new Promise((resolve, reject) => {
        const cursorRequest = objectStore.openCursor()
        let objectStoreSize = 0
        cursorRequest.onsuccess = function (event) {
          const cursor = event.target.result
          if (cursor) {
            const recordSize = JSON.stringify(cursor.value).length
            objectStoreSize += recordSize
            cursor.continue()
          } else {
            resolve(objectStoreSize)
          }
        }
        cursorRequest.onerror = function (event) {
          reject(event.target.error)
        }
      })
    },

使用方法

vue 复制代码

this.calculateDatabaseSize().then(totalSize => {
    console.log('indexedDb所占用存储空间大小为：', totalSize)
})

三、结论

测量 IndexedDB 存储空间大小需要结合直接查询与开发者工具辅助。通过编写代码遍历数据并计算记录大小，可以适应复杂数据结构和特殊数据类型，确保估算的准确性。同时，利用浏览器开发者工具提供的可视化界面，能够快速获取直观且准确的存储使用情况。掌握这两种方法，有助于开发者有效地管理 IndexedDB 存储资源，确保应用程序在有限的本地存储空间内高效运行。