如何在Web Storage中存储和读取复杂数据类型？

Web Storage 仅支持字符串类型的键值对存储，但实际开发中常需存储对象、数组等复杂数据类型。解决方法是通过 JSON 序列化与反序列化 实现复杂数据的转换，具体操作如下：

一、核心原理

• 存储时：使用 JSON.stringify() 将复杂数据类型（对象、数组等）转换为字符串。
• 读取时：使用 JSON.parse() 将字符串还原为原始的复杂数据类型。

这种方式适用于所有可被 JSON 表示的数据（对象、数组、字符串、数字、布尔值、null），但注意 JSON 不支持函数、正则、日期对象等特殊类型（需额外处理）。

二、具体实现示例

1. 存储和读取对象

// 定义一个复杂对象
const userInfo = {
   
  id: 1001,
  name: "鸿蒙用户",
  settings: {
   
    theme: "dark",
    notifications: true
  },
  hobbies: ["编程", "运动"]
};

// 1. 存储：将对象转为JSON字符串
localStorage.setItem('userInfo', JSON.stringify(userInfo));

// 2. 读取：将JSON字符串还原为对象
const savedUserInfo = localStorage.getItem('userInfo');
const parsedUserInfo = savedUserInfo ? JSON.parse(savedUserInfo) : {
   };

// 使用还原后的数据
console.log(parsedUserInfo.name); // 输出："鸿蒙用户"
console.log(parsedUserInfo.settings.theme); // 输出："dark"

2. 存储和读取数组

// 定义一个数组
const todos = [
  {
    id: 1, text: "学习Web Storage", done: false },
  {
    id: 2, text: "处理复杂数据", done: true }
];

// 1. 存储数组
localStorage.setItem('todos', JSON.stringify(todos));

// 2. 读取数组
const savedTodos = localStorage.getItem('todos');
const parsedTodos = savedTodos ? JSON.parse(savedTodos) : [];

// 使用数组
console.log(parsedTodos[0].text); // 输出："学习Web Storage"

3. 处理特殊类型（如日期对象）

JSON 序列化会将 Date 对象转为字符串（如 "2024-07-23T08:00:00.000Z"），读取时需手动还原为 Date 对象：

// 包含日期对象的数据
const event = {
   
  title: "会议",
  time: new Date(2024, 6, 23) // 2024年7月23日
};

// 1. 存储
localStorage.setItem('event', JSON.stringify(event));

// 2. 读取并还原日期对象
const savedEvent = localStorage.getItem('event');
if (savedEvent) {
   
  const parsedEvent = JSON.parse(savedEvent);
  // 将字符串转为Date对象
  parsedEvent.time = new Date(parsedEvent.time);
  console.log(parsedEvent.time.getFullYear()); // 输出：2024
}

4. 批量操作复杂数据

对于多个复杂数据，可统一存储在一个对象中，减少键名数量：

// 批量存储多种数据
const appData = {
   
  user: {
    name: "张三", age: 25 },
  history: ["首页", "详情页"],
  config: {
    version: "1.0.0" }
};

// 存储
localStorage.setItem('appData', JSON.stringify(appData));

// 读取
const parsedData = JSON.parse(localStorage.getItem('appData') || '{}');
console.log(parsedData.user.name); // 输出："张三"
console.log(parsedData.history[0]); // 输出："首页"

三、注意事项

1. 数据大小限制
   单个 localStorage 存储的总数据量建议不超过 5MB，复杂数据序列化后可能体积较大，需注意控制大小（如分页存储大量列表数据）。

2. 不支持的类型
   JSON 不支持函数、正则表达式、undefined、Symbol 等类型，存储这些类型会导致数据丢失或异常：

   const invalidData = {
        
     func: () => {
        }, // 序列化后会丢失（变为null）
     reg: /test/,   // 序列化后变为空对象{}
     undef: undefined // 序列化后会被忽略
   };
   console.log(JSON.stringify(invalidData)); 
   // 输出：{"reg":{}}（函数和undefined丢失）
   

3. 性能考量
   频繁序列化/反序列化大型复杂数据（如万级数组）会消耗性能，建议：

   • 只存储必要字段，避免冗余数据。
   • 高频访问的数据可缓存到内存中，减少 JSON.parse() 调用次数。

4. 错误处理
   读取时需处理可能的 JSON 解析错误（如数据被篡改导致格式异常）：

   try {
        
     const data = JSON.parse(localStorage.getItem('data') || '');
   } catch (error) {
        
     console.error('数据解析失败：', error);
     // 处理错误（如清空无效数据）
     localStorage.removeItem('data');
   }
   

总结

在 Web Storage 中存储复杂数据的核心是 JSON 序列化与反序列化，步骤简单且兼容性好。只需注意数据类型限制和大小控制，即可满足大多数场景的需求。对于包含特殊类型（如 Date）的数据，需在反序列化后手动还原类型，确保数据可用性。