假設您想在插入項目之前檢查 localStorage 是否已滿：您會怎麼做？

好吧，浏覽器隻有一種方式告訴您存儲是否已滿：當您嘗試存儲未填充到 localStorage 的項目時，它們會抛出錯誤（通常稱為 QuotaExceededError）。因此，要處理這個特定的用例，您必須将 localStorage.setItem 包裝在 try & catch 中，以檢測 localStorage 中是否有足夠的空間來存儲該項目：

(function app() { try { localStorage.setItem(keyName, keyValue); } catch (err) { // 處理空間不足的情況 // item in localStorage. } })();

盡管這種方法有效，但您應該記住，localStorage 不會僅在沒有可用空間時抛出。它還會引發支持錯誤（例如，因為浏覽器不支持 localStorage API）和安全錯誤（例如，因為在某些浏覽器中以私有模式浏覽時 localStorage API 受到限制）。

要區分此類錯誤和空間不足的錯誤，您可以嘗試顯式檢測 QuotaExceededError 并采取相應的行為：

/** * 确定錯誤是否為 QuotaExceededError。 * * 浏覽器會抛出略有不同的QuotaExceededError的變體 * (t這對舊的浏覽器/版本來說尤其如此), 所以我們需要檢查 * 不同的字段和值，以确保我們涵蓋每一種邊緣情況。 * * @param err - 要檢查的錯誤 * @return Is the error a QuotaExceededError? */ function isQuotaExceededError(err: unknown): boolean { return ( err instanceof DOMException && // everything except Firefox (err.code === 22 || // Firefox err.code === 1014 || // test name field too, because code might not be present // everything except Firefox err.name === "QuotaExceededError" || // Firefox err.name === "NS_ERROR_DOM_QUOTA_REACHED") ); } (function app() { try { localStorage.setItem(keyName, keyValue); } catch (err) { if (isQuotaExceededError(err)) { // 處理空間不足的情況 } else { // 處理不支持 localStorage API 的情況。 } } });

有一種比每次在 localStorage 中存儲内容時檢查錯誤類型更好的方法。

上面代碼中您會看到，浏覽器抛出與空間無關的錯誤的唯一情況是不支持 localStorage API。

因此，我們可以在開始使用之前單獨檢測 localStorage 的可用性（一次），而不是每次調用 setItem 時都考慮它們。

下面的完整代碼片段是 MDN 的特征檢測 localStorage 代碼片段的輕微變體。它可用于檢查實現 Web Storage API 的任何 API 的支持——因此它适用于 localStorage 和 sessionStorage

/** * 确定錯誤是否為QuotaExceededError。 * * Browsers love throwing slightly different variations of QuotaExceededError * (this is especially true for old browsers/versions), so we need to check * different fields and values to ensure we cover every edge-case. * * @param err - 要檢查的錯誤 * @return 錯誤是 QuotaExceededError 嗎？ */ function isQuotaExceededError(err: unknown): boolean { return ( err instanceof DOMException && // everything except Firefox (err.code === 22 || // Firefox err.code === 1014 || // test name field too, because code might not be present // everything except Firefox err.name === "QuotaExceededError" || // Firefox err.name === "NS_ERROR_DOM_QUOTA_REACHED") ); } /** * 确定是否支持實現 Web Storage API（localStorage 或 sessionStorage）的存儲。 * * 浏覽器可以通過不同的方式使存儲不能被訪問，比如在全局對象上完全不暴露它，或者在你訪問/存儲一個項目時就抛出錯誤。 * 為了說明所有這些情況，我們嘗試用try & catch來存儲一個假項目，以分析抛出的錯誤。 * @param webStorageType - 要檢查的 Web 存儲 API * @return 是否支持Storage？ */ function isStorageSupported( webStorageType: "localStorage" | "sessionStorage" = "localStorage" ): boolean { let storage: Storage | undefined; try { storage = window[webStorageType]; if (!storage) { return false; } const x = `__storage_test__`; storage.setItem(x, x); storage.removeItem(x); return true; } catch (err) { // 僅當已存儲某些内容時，我們才會确認 QuotaExceededError。 const isValidQuotaExceededError = isQuotaExceededError(err) && storage.length > 0; return isValidQuotaExceededError; } } (function app() { if (!isStorageSupported("localStorage")) { // 處理不支持localStorage API的情況 return; } // 你現在可以使用setItem，如果它抛出異常，隻能說明localStorage已滿。 try { localStorage.setItem(keyName, keyValue); } catch (err) { // 處理 localStorage 已滿的情況。 } });

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部