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