如何操作HTML5 localStorage实现数据保存？

本文共计699个文字，预计阅读时间需要3分钟。

localStorage 并非万能的持久化方案，它仅存储字符串、不支持跨域、没有过期机制，使用不当会导致数据丢失。

localStorage.setItem() 存不了对象或数组

直接传 JSON.stringify() 以外的值，比如对象、数组、数字，会被自动转成 "[object Object]" 或 "1,2,3"，取出来根本不是原来的东西。

• 必须手动序列化：localStorage.setItem('user', JSON.stringify({name: 'Alice', age: 30}))
• 读取时也要反序列化：JSON.parse(localStorage.getItem('user'))
• 如果值是 null 或 undefined，setItem 会存成字符串 "null"，不是真的空值
• 遇到 TypeError: Converting circular structure to JSON 就说明对象里有循环引用，不能直接 JSON.stringify

localStorage 在同源页面间共享，但不跨标签页实时同步

你在标签页 A 存了数据，标签页 B 刚打开时能读到，但 A 改了数据，B 不会自动更新 —— 它不知道变了。