用 Promise 封装 localStorage 读写操作,核心是将同步 API 转为返回 Promise 的函数,实现自动 JSON 序列化/反序列化、统一错误处理与类型安全;封装 setItem、getItem、removeItem 和 clear,均支持异常捕获与语义化错误提示,并可 await 调用。

用 Promise 封装 localStorage 的读写操作,核心是把同步的 API 包装成返回 Promise 的函数,解决“不能 await 同步方法”的问题,同时统一错误处理和类型安全(比如自动 JSON 序列化/反序列化)。
封装 setItem:支持任意值 + 自动 JSON 处理
localStorage 只接受字符串,直接存对象会变成 [object Object]。封装时应自动 JSON.stringify,失败时 reject 错误。
- 检查值是否可序列化(如避免存 function、undefined、Symbol)
- 捕获
JSON.stringify和localStorage.setItem的异常 - 成功时不返回值,符合习惯;失败时抛出语义化错误
function setStorage(key, value) {
return new Promise((resolve, reject) => {
try {
const str = JSON.stringify(value);
localStorage.setItem(key, str);
resolve();
} catch (err) {
reject(new Error(`Failed to save ${key}: ${err.message}`));
}
});
}
封装 getItem:自动解析 JSON + 兜底默认值
读取时需尝试 JSON.parse,但要兼容原始字符串、null、或根本不存在的 key。建议支持传入默认值,避免调用方频繁判空。
- 先用
localStorage.getItem(key)获取原始字符串 - 为空时直接返回默认值(不 parse)
- 非空时尝试 JSON.parse,失败则原样返回字符串(或 reject,按需选择)
function getStorage(key, defaultValue = null) {
return new Promise((resolve) => {
try {
const str = localStorage.getItem(key);
if (str === null) {
resolve(defaultValue);
return;
}
const parsed = JSON.parse(str);
resolve(parsed);
} catch (err) {
// 解析失败,返回原始字符串(或可改为 resolve(defaultValue))
resolve(str);
}
});
}
封装 removeItem 和 clear:统一 Promise 接口
虽然它们本身不会抛错(除非 Storage 被禁用),但为接口一致性,仍应返回 Promise,并在异常时 reject。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记(深入)”;
-
removeItem和clear都是同步无返回值操作 - 包裹 try/catch,localStorage 不可用时(如隐私模式)会报
QuotaExceededError或SecurityError - 成功 resolve(undefined),符合 Promise 最佳实践
function removeStorage(key) {
return new Promise((resolve, reject) => {
try {
localStorage.removeItem(key);
resolve();
} catch (err) {
reject(new Error(`Failed to remove ${key}: ${err.message}`));
}
});
}
function clearStorage() {
return new Promise((resolve, reject) => {
try {
localStorage.clear();
resolve();
} catch (err) {
reject(new Error(`Failed to clear storage: ${err.message}`));
}
});
}
组合使用 + 实际调用示例
封装后可自然 await,配合 try/catch 处理失败场景,代码更线性、易读。
async function handleUserSettings() {
try {
await setStorage('theme', 'dark');
await setStorage('notifications', { enabled: true, sound: false });
const theme = await getStorage('theme', 'light');
const notif = await getStorage('notifications', {});
console.log(theme, notif); // 'dark', { enabled: true, sound: false }
} catch (err) {
console.error('Storage operation failed:', err.message);
}
}
不复杂但容易忽略:localStorage 是同步阻塞的,Promise 封装不会提升性能,但能统一异步风格、改善错误流和可维护性。生产中还可扩展为支持过期时间、多存储源(IndexedDB fallback)等。

















