js如何检测设备存储空间 5种存储检测方案掌握设备容量状态-js教程-PHP中文网

js如何检测设备存储空间 5种存储检测方案掌握设备容量状态

冰火之心

发布： 2025-06-27 22:37:01

原创

324人浏览过

javascript无法直接访问设备存储空间，但可通过间接方法估算。1. 使用navigator.storage api（推荐），通过estimate()方法获取使用量和配额估算值，优点是标准api兼容性好，缺点是估算值不精确；2. 尝试写入大量数据，通过异常判断存储上限，优点是实现简单，缺点是不精确且影响性能；3. 使用indexeddb进行更可靠的大数据存储测试，优点是比localstorage更可靠，缺点是代码复杂且同样不精确；4. filesystem api（已废弃），可获取应用配额，但不推荐使用；5. 结合service worker缓存机制间接检测，优点是便于资源管理，缺点是主要用于缓存。选择方案时应优先考虑兼容性和安全限制，避免阻塞主线程并优化用户体验。

js如何检测设备存储空间 5种存储检测方案掌握设备容量状态

检测设备存储空间，在JS里其实挺重要的，特别是做PWA或者需要大量本地存储的应用。直接告诉你答案吧，JS本身没法直接访问底层的硬件信息，但我们可以通过一些间接的方法来估算或获取存储信息。

解决方案

这里介绍几种常用的JS检测设备存储空间的方法，各有优缺点，你可以根据实际情况选择：

navigator.storage API (推荐)

这是HTML5 Storage API的一部分，提供了一种更安全、更可靠的方式来管理和查询存储信息。
```
if (navigator.storage && navigator.storage.estimate) {
  navigator.storage.estimate().then(estimate => {
    console.log(`Usage: ${estimate.usage}`);
    console.log(`Quota: ${estimate.quota}`);
    console.log(`Percent Used: ${Math.round(estimate.usage / estimate.quota * 100)}%`);
  });
} else {
  console.log("Storage estimate API not supported.");
}
```
登录后复制
- 优点: 标准API，浏览器兼容性好，提供usage（已使用空间）和quota（可用空间）信息。
- 缺点: 返回的是估算值，不是绝对精确的。而且，不同浏览器和设备上的quota计算方式可能不同。

尝试写入大量数据

这是一种比较“暴力”的方法，通过不断写入数据，直到抛出异常，然后根据写入的数据量来估算可用空间。

function estimateStorage() {
  let size = 0;
  try {
    localStorage.clear(); // 清空之前的数据
    const start = Date.now();
    while (Date.now() - start < 5000) { // 限制时间，防止无限循环
      const key = 'test' + size;
      const value = 'a'.repeat(1024); // 1KB 的字符串
      localStorage.setItem(key, value);
      size++;
    }
  } catch (e) {
    console.log("Storage full at:", size, "KB");
    localStorage.clear(); // 清空测试数据
    return size;
  }
  localStorage.clear();
  console.log("Storage estimate failed: likely unlimited");
  return -1; // 无法估算
}

estimateStorage();

登录后复制

优点: 相对简单，不需要额外的API支持。
缺点: 非常不精确，会阻塞主线程，影响用户体验。而且，如果存储空间足够大，可能会导致浏览器崩溃。不推荐在生产环境中使用。

使用IndexedDB

IndexedDB是一个客户端数据库，可以用来存储大量结构化数据。虽然主要目的是数据存储，但我们也可以利用它来检测存储空间。

function estimateStorageWithIndexedDB() {
  return new Promise((resolve, reject) => {
    const dbName = 'storage_test_db';
    const objectStoreName = 'test_store';
    const request = indexedDB.open(dbName, 1);

    request.onerror = (event) => {
      reject('Failed to open database');
    };

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      const objectStore = db.createObjectStore(objectStoreName);
    };

    request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction([objectStoreName], 'readwrite');
      const objectStore = transaction.objectStore(objectStoreName);

      let size = 0;
      const start = Date.now();
      function writeData() {
        if (Date.now() - start > 5000) {
          transaction.abort(); // 超时
          db.close();
          indexedDB.deleteDatabase(dbName);
          resolve(-1); // 估算失败
          return;
        }
        const key = 'key' + size;
        const value = new ArrayBuffer(1024); // 1KB
        const addRequest = objectStore.add(value, key);

        addRequest.onsuccess = () => {
          size++;
          writeData();
        };

        addRequest.onerror = () => {
          transaction.abort();
          db.close();
          indexedDB.deleteDatabase(dbName);
          console.log("IndexedDB Storage full at:", size, "KB");
          resolve(size);
        };
      }

      writeData();

      transaction.oncomplete = () => {
        db.close();
        indexedDB.deleteDatabase(dbName);
      };

      transaction.onerror = () => {
        db.close();
        indexedDB.deleteDatabase(dbName);
        reject('Transaction error');
      };
    };
  });
}

estimateStorageWithIndexedDB()
  .then(size => console.log("Estimated storage (IndexedDB):", size, "KB"))
  .catch(error => console.error(error));

登录后复制

优点: 比localStorage更可靠，可以存储更大的数据。
缺点: 代码更复杂，需要处理异步操作。同样不精确，也会阻塞主线程。

使用FileSystem API (已废弃)

这是一个已废弃的API，不推荐使用。但如果你的应用需要兼容一些老旧的浏览器，可以考虑使用。

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;

if (window.requestFileSystem) {
  window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function(fs) {
    console.log('Quota in bytes: ' + fs.quota);
  }, function(e) {
    console.log('Error getting quota: ' + e.code);
  });
} else {
  console.log('FileSystem API not supported');
}

登录后复制

优点: 可以获取到分配给应用的quota。
缺点: API已废弃，兼容性差。

结合Service Worker缓存

Service Worker 可以拦截网络请求并缓存资源。我们可以利用缓存API来间接检测存储空间。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      return caches.open('test-cache');
    })
    .then(cache => {
      // 尝试缓存大量资源，并监听错误
      // ...
    })
    .catch(error => {
      console.error('Service Worker cache error:', error);
    });
}

登录后复制