CODEWITHSUNDEEP
browserstorageindexeddb
user2145184
user2145184

Reputation: 510

Can I check how much space my indexedDB is taking up?

I'd like to get a breakdown of how much storage space a web app I'm working on is taking up. More specifically I'm interested in the size of data stored in indexedDB.

I know I can use navigator.storage.estimate() to get a total value, but it shows over 1 mbyte even with an empty db, and I'm interested in knowing the size of indexedDB specifically.

Is there a way to check the size?

Upvotes: 20

Views: 13763

Answers (2)

Joshua Bell
Joshua Bell

Reputation: 8357

  • Chrome/Edge/Opera Only: (await navigator.storage.estimate()).usageDetails provides a breakdown by storage type, but it's not supported in Firefox/Safari (see browser compatibility).

    Here is an an example of the return value of await navigator.storage.estimate():

    {
    "quota": 300562366464,
    "usage": 6432044,
    "usageDetails": {
        "caches": 2691584,
        "indexedDB": 3738459,
        "serviceWorkerRegistrations": 2001
    }
}

    Note: The returned values are not exact: between compression, deduplication, and obfuscation for security reasons, they will be imprecise.

  • In Chrome DevTools, the Application tab provides a breakdown of storage by type; click the "Clear storage" view in the top left and a graph should appear. This is useful for local debugging, but not understanding storage usage "in the wild"

    Screenshot

Upvotes: 22

Webber
Webber

Reputation: 194

Yes you can make use of the Quota Management API to get these information. this is an experimental feature and currently not supported by EDGE

This site will give you information how Browser support this and can see in real

Example

// Query current usage and availability in Temporary storage:
navigator.storageQuota.queryInfo("temporary").then(
  function(storageInfo) {
    // Continue to initialize local cache using the obtained
    // usage and remaining space (quota - usage) information.
    initializeCache(storageInfo.usage,
                    storageInfo.quota - storageInfo.usage);
  });

More reading is available in W3org

Upvotes: -1

Related Questions