localStorage介绍
localStorage 是浏览器提供的一种 Web 存储机制，允许在客户端以键值对的形式存储数据。与 sessionStorage 不同的是，localStorage 中的数据是持久化的，即使用户关闭浏览器或重新启动设备，数据也不会丢失，除非用户手动清除数据或代码删除数据。
一般浏览器限制每个域名大约 5-10 MB 的存储空间，因此适合存储少量数据，但不适合存储大文件。
大多数人很少关注存储空间是否超出，实际应用过程中遇到此情况该如何处理？
检查 localStorage 是否已满
浏览器告诉您存储是否已满的唯一方式是：当您尝试存储一个不符合 localStorage 限制的项时，它会抛出一个错误（通常称为 QuotaExceededError）。因此，要处理这个特定的用例，您必须将 localStorage.setItem 包裹在 try 和 catch 中，以检测 localStorage 中是否有足够的空间来存储该项：
(function app() {
try {
localStorage.setItem(keyName, keyValue);
} catch (err) {
// 处理无法在 localStorage 中存储项的情况。
}
})();
虽然这种方法有效，但您需要记住，localStorage 并不是只有在没有可用空间时才会抛出错误。它还会抛出支持错误（例如，因为浏览器不支持 localStorage API）和安全错误（例如，因为某些浏览器在隐私模式下限制 localStorage API）。
为了区分这些错误和关于配额的错误，您可以尝试显式检测 QuotaExceededError 并相应地处理：
/**
* 判断错误是否为 QuotaExceededError。
*
* 浏览器倾向于抛出略有不同的 QuotaExceededError 变体
* （对于旧浏览器/版本尤其如此），因此我们需要检查
* 不同的字段和值，以确保覆盖每个边缘案例。
*
* @param err - 要检查的错误
* @return 错误是否为 QuotaExceededError？
*/
function isQuotaExceededError(err: unknown): boolean {
return (
err instanceof DOMException &&
// 除了 Firefox
(err.code === 22 ||
// Firefox
err.code === 1014 ||
// 也检查 name 字段，因为 code 可能不存在
// 除了 Firefox
err.name === "QuotaExceededError" ||
// Firefox
err.name === "NS_ERROR_DOM_QUOTA_REACHED")
);
}
(function app() {
try {
localStorage.setItem(keyName, keyValue);
} catch (err) {
if (isQuotaExceededError(err)) {
// 处理无法在 localStorage 中存储项的情况。
} else {
// 处理 localStorage API 不受支持的情况。
}
}
})();
然而，有一种更好的方法，而不是每次存储内容到 localStorage 时都检查错误类型。
您可以看到，浏览器抛出非配额相关错误的唯一情况是当 localStorage API 不受支持时。
因此，我们可以在开始使用 localStorage 之前（只需一次）检测其可用性。
以下完整代码片段稍微修改了 MDN 的特性检测 localStorage 的代码片段。它可以用于检查实现 Web Storage API 的任何 API 的支持——因此它适用于 localStorage 和 sessionStorage。
/**
* 判断错误是否为 QuotaExceededError。
*
* 浏览器倾向于抛出略有不同的 QuotaExceededError 变体
* （对于旧浏览器/版本尤其如此），因此我们需要检查
* 不同的字段和值，以确保覆盖每个边缘案例。
*
* @param err - 要检查的错误
* @return 错误是否为 QuotaExceededError？
*/
function isQuotaExceededError(err: unknown): boolean {
return (
err instanceof DOMException &&
(err.code === 22 ||
err.code === 1014 ||
err.name === "QuotaExceededError" ||
err.name === "NS_ERROR_DOM_QUOTA_REACHED")
);
}
/**
* 判断实现 Web Storage API（localStorage 或 sessionStorage）的存储是否受支持。
*
* 浏览器可以通过不同方式使存储不可访问，例如
* 根本不在全局对象上暴露它，或在您访问/存储项时立即抛出错误。
* 为了考虑所有这些情况，我们尝试使用
* try & catch 存储一个虚拟项以分析抛出的错误。
*
* @param webStorageType - 要检查的 Web Storage API
* @return 存储是否受支持？
*/
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 已满的情况。
}
})();
其他注意
- 数据类型转换：localStorage 只能存储字符串。如果需要存储对象或数组，需使用 JSON.stringify 转换为字符串；读取时用 JSON.parse 将字符串转换回对象或数组。
- 错误处理：写入 localStorage 时可能会遇到 QuotaExceededError（配额超出错误），尤其是在浏览器存储空间已满时。
- 隐私和安全：localStorage 中的数据可以被 JavaScript 轻松读取，不应存储敏感数据（如密码、用户私人信息等），以防止潜在的跨站脚本（XSS）攻击。
小结
localStorage 提供了简单易用的 API 来持久化客户端数据，适合在 Web 应用中保存少量的、长期需要的配置信息。合理使用 localStorage 可以提升用户体验，但在存储数据时需注意隐私和安全问题。
