JavaScript Navigator storage Property

What You’ll Learn

navigator.storage is the entry point for the Storage API’s StorageManager. Learn how to estimate usage and quota, check or request persistence, secure context rules, five examples, and try-it labs.

Introduction

Modern sites store data in IndexedDB, the Cache API, and other origin storage. Browsers give each site a limited amount of space — and may clear that data when the device is low on disk unless persistence is granted.

navigator.storage returns the singleton StorageManager for the current site. MDN: you can examine and configure persistence, and learn approximately how much more space is available.

Understanding the storage Property

Think of navigator.storage as a storage dashboard for your origin: how much you use, how much you may use, and whether data is marked persistent.

• StorageManager — singleton returned by the property.
• estimate() — Promise with approximate usage and quota (bytes).
• persisted() — Promise resolving to whether persistence is already granted.
• persist() — request persistent storage (browser decides / may prompt).
• getDirectory() — access the origin private file system (OPFS) when supported.
• Secure context — HTTPS / localhost required.

📝 Syntax

General form of the property:

navigator.storage

Value

• A StorageManager object for the current site / app.

Common patterns

// Feature-detect:
if (navigator.storage && navigator.storage.estimate) {
  // StorageManager available
}

// Approximate usage and quota:
const { usage, quota } = await navigator.storage.estimate();
console.log("Used " + usage + " of " + quota + " bytes");

// Persistence:
const already = await navigator.storage.persisted();
if (!already) {
  const granted = await navigator.storage.persist();
  console.log("persist granted?", granted);
}

Examples Gallery

Examples follow MDN navigator.storage / StorageManager patterns. Prefer Try It Yourself on HTTPS — numbers are approximate and differ by browser and origin.

const supported = Boolean(navigator.storage);
console.log(supported ? "StorageManager available" : "StorageManager missing");

StorageManager available
(or "StorageManager missing" on unsupported / insecure pages)

console.log("secure: " + window.isSecureContext);
console.log("storage: " + Boolean(navigator.storage));

if (!window.isSecureContext) {
  console.log("Serve over HTTPS to use navigator.storage");
} else if (!navigator.storage) {
  console.log("Secure, but StorageManager not exposed");
} else {
  console.log("Ready to call estimate / persist");
}

secure: true
storage: true
Ready to call estimate / persist

async function showEstimate() {
  if (!navigator.storage || !navigator.storage.estimate) {
    return "StorageManager.estimate not supported.";
  }
  const { usage, quota } = await navigator.storage.estimate();
  const usedMB = (usage / (1024 * 1024)).toFixed(2);
  const quotaMB = (quota / (1024 * 1024)).toFixed(2);
  return "usage ≈ " + usedMB + " MB\nquota ≈ " + quotaMB + " MB";
}

showEstimate().then(console.log);

usage ≈ 0.05 MB
quota ≈ 2048.00 MB
(numbers vary by browser and origin)

async function checkPersisted() {
  if (!navigator.storage || !navigator.storage.persisted) {
    return "persisted() not supported.";
  }
  const isPersisted = await navigator.storage.persisted();
  return "persisted: " + isPersisted;
}

checkPersisted().then(console.log);

persisted: false
(or true if already granted)

async function requestPersist() {
  if (!navigator.storage || !navigator.storage.persist) {
    return "persist() not supported.";
  }
  const granted = await navigator.storage.persist();
  return "persist granted: " + granted;
}

requestPersist().then(console.log);

persist granted: false
(or true — browsers use their own rules)

🚀 Common Use Cases

• Offline / PWA apps — warn before filling quota; request persistence for important data.
• Media caches — estimate space before downloading large assets.
• Editors & notebooks — keep drafts safer with persist() when granted.
• Storage health UI — show “X MB used of Y MB” from estimate().
• OPFS apps — use getDirectory() when building file-like storage in the browser.

📝 Notes

• Baseline Widely available (MDN, since December 2021).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Secure context required (HTTPS / localhost).
• Returns a singleton StorageManager.
• Related: serviceWorker, usb, locks, Window.

💡 Best Practices