JavaScript中SessionStorage怎么封装带自动反序列化的存取小工具-js教程-PHP中文网

封装 sessionstorage 工具实现自动序列化/反序列化：存时自动 json.stringify 并拦截 undefined、函数等非法值，取时自动 json.parse 且失败返回默认值，内置大小校验、异常捕获及 ttl 可选支持。

javascript中sessionstorage怎么封装带自动反序列化的存取小工具

直接封装一个带自动序列化/反序列化的 sessionStorage 工具，核心就是读写时统一处理 JSON.stringify 和 JSON.parse，同时做好异常兜底。

基础封装：支持任意数据类型存取

原生 sessionStorage 只接受字符串，所以每次存对象、数组、布尔、数字等都得手动转，取的时候再手动解析。封装后调用就像操作普通变量一样自然：

存值时自动 JSON.stringify，遇到无法序列化的值（如函数、undefined、Date 对象）会静默过滤或报错提示
取值时自动 JSON.parse，失败则返回 null 或默认值，不抛异常中断流程
删除和清空方法保持原语义，无需额外处理

健壮性处理：避开常见坑

实际项目中容易踩的点，比如 undefined、NaN、Date、循环引用、存储超限等，封装时要提前拦截：

Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

undefined / function / symbol：JSON.stringify 会忽略它们，存进去是 undefined → 字符串 "undefined"，取出来再 parse 就是 null。建议存前用 typeof 过滤并 warn
Date 对象：可提前转成 ISO 字符串（date.toISOString()），读取时再 new Date() 恢复（也可在工具里统一处理）
超出 5MB 限制：写入前用 JSON.stringify(val).length 预估大小，超限时 throw 或 console.warn
JSON.parse 失败：必须 try-catch，避免因脏数据导致整个页面 JS 报错

实用小工具代码示例

一个轻量、可直接复用的封装：

const ss = {
  set(key, val) {
    try {
      const str = JSON.stringify(val);
      if (str.length > 4.8 * 1024 * 1024) {
        console.warn(`[ss.set] "${key}" exceeds ~4.8MB limit`);
        return false;
      }
      sessionStorage.setItem(key, str);
      return true;
    } catch (e) {
      console.warn(`[ss.set] failed to serialize "${key}":`, e.message);
      return false;
    }
  },
  get(key, defaultValue = null) {
    try {
      const str = sessionStorage.getItem(key);
      return str ? JSON.parse(str) : defaultValue;
    } catch (e) {
      console.warn(`[ss.get] failed to parse "${key}":`, e.message);
      return defaultValue;
    }
  },
  remove(key) {
    sessionStorage.removeItem(key);
  },
  clear() {
    sessionStorage.clear();
  }
};

用法：ss.set('user', { id: 1, name: 'Alice' });，const user = ss.get('user'); —— 完全不用管 JSON 转换。