当前位置: 首页 > news >正文

存个对象到localStorage,结果[object Object]?

💓 博客主页:瑕疵的CSDN主页
📝 Gitee主页:瑕疵的gitee主页
⏩ 文章专栏:《热点资讯》

存个对象到localStorage,结果[object Object]?

目录

昨晚写登录状态,随手存个user对象。

代码写得贼溜:

localStorage.setItem('user', { name: '张三', age: 25 });

第二天取出来:

const user = localStorage.getItem('user');
console.log(user); // 输出 [object Object]

当场傻眼。这玩意儿咋回事?

根源:

localStorage 他妈的只认字符串!你存个对象,它自动调用 toString(),直接吐出 [object Object]。

不是它不认对象,是它压根儿没这个功能。就像你往水桶里塞个苹果,桶只认水,苹果塞进去就变成“水果”了——但你塞了块砖头,桶只能回你“砖头”。

解决代码:

错误写法(别学):

// 存对象 → 会变成 [object Object]
localStorage.setItem('user', { name: '张三', age: 25 });

// 取出来 → 拿到字符串 "[object Object]"
const user = localStorage.getItem('user');
console.log(user); // [object Object]

正确写法(必须用):

// 存之前转成字符串
const user = { name: '张三', age: 25 };
localStorage.setItem('user', JSON.stringify(user)); // 关键:用 stringify

// 取出来转回对象
const stored = localStorage.getItem('user');
const parsedUser = JSON.parse(stored); // 关键:用 parse
console.log(parsedUser); // { name: '张三', age: 25 }

避坑总结:

  1. localStorage 是字符串仓库,不是对象仓库。存任何东西都得先转成字符串。
  2. 用 JSON.stringify 存,JSON.parse 取。这是铁律。
  3. 别忘了处理空值:存了 null 或 undefined 时,解析会报错。
    // 安全写法
    const stored = localStorage.getItem('user');
    const user = stored ? JSON.parse(stored) : null;
  4. 常见坑:以为存数组能直接用。存数组也得 stringify:
    localStorage.setItem('list', JSON.stringify([1,2,3]));

我去年被这问题坑到凌晨三点。同事还笑我:“就这?还前端呢?”

现在写代码前必默念:存对象?先转 JSON。别让 [object Object] 再出来丢人。

http://www.jsqmd.com/news/1078832/

相关文章:

  • 【C++面经】1-5
  • 服务定位器中的依赖查找与实例管理
  • 分布式系统设计最佳实践
  • 注入燃料——Entity Framework Core 与 Code First 实战
  • 品牌建设化技术品牌价值度量与传播效果评估
  • AI 建议直接升级依赖版本,为什么编译通过后仍可能在运行时 `NoSuchMethodError`
  • WeChatMsg完全指南:重新掌控你的数字记忆,做个人数据的主人
  • 移动端开发工具链
  • 如何正确地“拷贝”一个对象?(深拷贝与浅拷贝)
  • Navicat密码查看工具:终极解决方案帮你找回忘记的数据库密码
  • LSTM股价预测实战:金融时序建模的工程化落地指南
  • GEO优化公司能解决企业的什么问题?从AI搜索流量到品牌认知的全面解读
  • [AI][昇腾950] Atomic 操作说明
  • 技能进阶与Claude Design初体验
  • 终极修复指南:快速恢复DSM 7.2+群晖Video Station功能
  • 深度学习系统设计思考
  • 自然语言处理实践
  • Android权限管理实战:easypermissions库简化运行时权限请求
  • 【JAVA毕设源码分享】基于SpringBoot的智慧药店药品信息管理系统的设计与实现(程序+文档+代码讲解+一条龙定制)
  • AI写论文神器来袭!4款AI论文生成工具,让论文写作更高效!
  • 免费获取专业级字体:Montserrat完整使用终极指南
  • 农业物联网中的精准灌溉与作物生长模型
  • Github 开源社区中 AMD ROCm 相关项目的筛选技巧
  • 软件访问者管理化的操作元素分离
  • Gophish管理员密码丢失?SQLite数据库哈希重置实战指南
  • 高端制造 半导体与集成电路 溅射靶材、CMP 抛光耗材行业|技术管理主线完整晋升 CTO 岗位阶梯
  • 【JAVA毕设源码分享】基于SpringBoot技术的防盗门进销存管系统的设计与实现(程序+文档+代码讲解+一条龙定制)
  • Buzz:终极开源语音转录工具,打造高效音频处理工作流
  • 中兴光猫超级管理员权限获取完整指南:3步开启工厂模式
  • Kubernetes Pod 重启策略解析