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

localstorage取不出值(如何处理localStorage使用中的错误)(1)

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

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页