JavaScript無法直接訪問設備存儲空間，但可通過間接方法估算。1. 使用navigator.storage api（推薦），通過estimate()方法獲取使用量和配額估算值，優點是標準api兼容性好，缺點是估算值不精確；2. 嘗試寫入大量數據，通過異常判斷存儲上限，優點是實現簡單，缺點是不精確且影響性能；3. 使用indexeddb進行更可靠的大數據存儲測試，優點是比localstorage更可靠，缺點是代碼復雜且同樣不精確；4. Filesystem api（已廢棄），可獲取應用配額，但不推薦使用；5. 結合service worker緩存機制間接檢測，優點是便于資源管理，缺點是主要用于緩存。選擇方案時應優先考慮兼容性和安全限制，避免阻塞主線程并優化用戶體驗。
檢測設備存儲空間，在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."); } -
嘗試寫入大量數據
這是一種比較“暴力”的方法，通過不斷寫入數據，直到拋出異常，然后根據寫入的數據量來估算可用空間。
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); }); }- 優點: 可以更好地管理緩存資源。
- 缺點: 主要用于緩存，檢測存儲空間只是一個副作用。
如何選擇最適合的存儲檢測方案？
選擇哪種方案取決于你的具體需求。如果只需要一個大概的估算值，并且需要兼容性較好的方案，navigator.storage.estimate是首選。如果需要更精確的控制，并且不介意代碼復雜度，可以考慮IndexedDB。避免使用已廢棄的FileSystem API。
為什么navigator.storage API返回的是估算值而不是精確值？
這是出于安全和隱私的考慮。如果網站可以精確地知道設備的存儲空間，可能會被用來進行用戶追蹤。估算值可以提供足夠的信息，同時保護用戶的隱私。
使用這些方法檢測存儲空間會影響用戶體驗嗎？如何優化？
是的，特別是寫入大量數據的方法，會阻塞主線程，影響用戶體驗。優化方法包括：
- 限制寫入時間或數據量: 不要無限制地寫入數據，設置一個合理的上限。
- 使用Web Worker: 將寫入操作放在Web Worker中執行，避免阻塞主線程。
- 使用requestIdleCallback: 在瀏覽器空閑時執行寫入操作。
- 顯示加載指示器: 在檢測存儲空間時，顯示一個加載指示器，告知用戶正在進行操作。
除了JS，還有其他方法可以檢測設備存儲空間嗎？
在Native應用中（如android或ios），可以使用相應的API直接獲取設備存儲空間信息。這些API提供更精確的數據，并且不會受到瀏覽器的限制。
