如何在 localStorage 和 sessionStorage 中存储对象：完整指南

为什么 localStorage 不能直接处理对象（以及如何解决）

您是否曾尝试将对象保存到 localStorage，却得到字符串 "[object Object]"？如果是这样——您并不孤单。这个问题在 Stack Overflow 上获得了数千次浏览，今天我们将一劳永逸地弄清楚如何正确地在 HTML5 网络存储 中存储对象。

问题在于，localStorage 和 sessionStorage 只能处理 字符串。当您编写：

localStorage.setItem('user', {name: '安娜', age: 25});

JavaScript 会自动调用对象的 .toString() 方法，结果得到一个无用的字符串。但有一种经过验证的方法可以绕过这个限制——通过 JSON 进行序列化。

什么是序列化以及为什么需要它

序列化是将复杂数据结构（对象、数组）转换为可保存或传输的字符串的过程。反向过程称为 反序列化（将字符串转换回对象）。

在 JavaScript 中，有两个方法负责此操作：

• JSON.stringify() — 将对象转换为 JSON 字符串
• JSON.parse() — 将 JSON 字符串转换回对象

正是这些方法——解决了在 localStorage 和 sessionStorage 中存储对象问题的关键。

逐步教程：将对象保存到 localStorage

步骤 1. 创建对象

const user = {  id: 101,  name: '玛丽亚',  email: 'maria@example.com',  preferences: {    theme: 'dark',    notifications: true  },  tags: ['javascript', 'react', 'python']};

步骤 2. 序列化为 JSON

const userJSON = JSON.stringify(user);console.log(userJSON); // {"id":101,"name":"玛丽亚","email":"maria@example.com","preferences":{"theme":"dark","notifications":true},"tags":["javascript","react","python"]}

步骤 3. 保存到 localStorage

localStorage.setItem('currentUser', userJSON);

步骤 4. 提取并反序列化

const savedUserJSON = localStorage.getItem('currentUser');const savedUser = JSON.parse(savedUserJSON);

console.log(savedUser.name); // 玛丽亚console.log(savedUser.preferences.theme); // darkconsole.log(savedUser.tags[0]); // javascript

就这样！现在您拥有了一个包含所有嵌套结构的完整对象。

sessionStorage：相同，但有一个细微差别

sessionStorage 的工作方式与 localStorage 完全相同，但有一个重要区别：数据仅在标签页关闭前存在。一旦您关闭浏览器标签页——所有数据都会被删除。

// 保存sessionStorage.setItem('tempData', JSON.stringify({step: 3, progress: '75%'}));

// 提取const temp = JSON.parse(sessionStorage.getItem('tempData'));console.log(temp.progress); // 75%

使用 sessionStorage 存储临时数据：表单状态、设置向导步骤、一次性令牌。

常见错误以及如何避免

错误 1：忘记解析

const data = localStorage.getItem('myObject');console.log(data.name); // undefined — 因为 data 是一个字符串！

解决方案： 获取数据后始终使用 JSON.parse()。

错误 2：保存 undefined 或函数

const obj = { name: 'Alex', greet: function() { return 'Hi!'; } };localStorage.setItem('test', JSON.stringify(obj)); // 函数会丢失

解决方案： JSON.stringify 不会保存函数、undefined、Symbol