es6 class 封装本地存储的核心是统一处理序列化、解析、过期判断与错误兜底:基础封装自动 json 转换;增强封装支持时效性与自动清理;安全封装用私有字段隔离状态;工程化封装支持多实例与模块导出。

用 ES6 Class 封装本地存储,核心是把 localStorage 的读写逻辑收拢到类中,统一处理字符串化、解析、过期判断和错误兜底。不是简单包装 setItem/getItem,而是让调用更安全、更语义化。
基础封装:支持对象自动序列化
localStorage 只接受字符串,每次存对象都要 JSON.stringify,取值都要 JSON.parse。封装时应在类内部自动完成:
- 构造函数接收 key 和原始数据(支持对象或基本类型)
-
set()方法内部自动转成字符串再存入 -
get()方法自动尝试解析,失败时返回默认值(如null或空对象) - 提供
remove()和clear()方法,保持接口完整
增强封装:加入有效期与自动清理
很多场景需要缓存“有时效性”,比如登录态、临时配置。可在类中引入时间戳和过期时长:
- 存数据时一并记录写入时间
writeTime和有效毫秒数period -
get()调用时先检查是否超时,超时则自动删除并返回null - 支持永久存储(
period为undefined或0)和限时存储两种模式
安全封装:使用私有属性隔离内部状态
避免外部直接修改 key 或原始数据结构,可用 ES2022+ 的私有字段语法(# 开头):
-
#key、#default、#period全部设为私有,仅通过公开方法访问 - 提供 getter(如
get key())只读暴露,不开放 setter - 关键操作如
save、load内部调用私有方法,外部无法绕过校验逻辑
工程化封装:支持多实例与模块导出
实际项目常需多个独立缓存域(如 userCache、configCache),应支持按需初始化:
- 类本身不依赖全局单例,每个
new Storage('user')是独立作用域 - 导出类而非实例,便于在不同模块按需导入使用
- 可搭配 TypeScript 定义泛型,约束存取的数据类型(如
Storage<user></user>)











