localstorage取不出值（如何处理localStorage使用中的错误）

假设您想在插入项目之前检查 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 已满的情况。 } });

,