如何处理 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 已满的情况。
  }
});