为什么我的LocalStorage数据在页面刷新后就丢失了？

艺菲 ☘︎ 提问于 2026-02-17 14:11:22 阅读 10

前端

大家好，我在做表单保存功能时遇到奇怪的问题。我用localStorage.setItem('formData', form)存了对象数据，但页面刷新后取出来的数据就变成了null，这是为什么啊？

我已经检查过键名拼写没问题，存储时控制台打印localStorage确实能看到数据。但重新加载页面后用JSON.parse(localStorage.getItem('formData'))就报错了，提示”Unexpected token null in JSON”…

我尝试过把数据转成字符串再存：

localStorage.setItem('formData', JSON.stringify(form))

但还是不行，求大神指点！

我来解答赞 3 收藏

反馈

1 条解答

UE丶爱华 Lv1

你遇到的问题大概率是因为存进去的数据格式有问题，或者是取数据的时候逻辑不对。LocalStorage 本身是持久化的，刷新页面不会清空数据，所以问题应该出在代码上。

首先，localStorage.setItem 只能存字符串，而你提到直接存了对象 form，这会导致存储的内容实际上是 [object Object]，这种格式取出来后肯定是没法用的。虽然你后面尝试了用 JSON.stringify 转成字符串再存，但可能还是有问题。比如，存的时候 form 的值是不是已经不对了，或者取的时候逻辑有误。

建议你按照以下步骤检查和修复：

1. 存数据的时候，确保 form 是一个有效的对象，并且用 JSON.stringify 转成字符串后再存。比如：

const form = { name: 'test', age: 25 };

localStorage.setItem('formData', JSON.stringify(form));

2. 取数据的时候，先判断 getItem 的返回值是不是 null，然后再解析。如果直接对 null 调用 JSON.parse，肯定会报错。可以这样写：

const storedData = localStorage.getItem('formData');

if (storedData) {

    const formData = JSON.parse(storedData);

    console.log(formData);

} else {

    console.log('No data found in localStorage');

}

3. 确保你的浏览器没有开启隐私模式或者禁用 LocalStorage。有些浏览器在隐私模式下会限制 LocalStorage 的使用，存进去的数据会在页面刷新后被清空。

4. 如果你用了某些框架（比如 React、Vue），注意组件的状态管理可能会覆盖 LocalStorage 的数据。比如，组件重新渲染时可能把初始状态赋值回去了，导致看起来像是数据丢失了。

如果按照这些步骤还是有问题，建议你在存和取的地方都加点日志，打印一下存进去的值和取出来的值，看看是不是预期的内容。开发这种功能的时候，日志是最简单有效的排查手段。

最后吐槽一句，LocalStorage 这种东西本来就不适合存复杂数据，建议你考虑把数据放到服务端存起来，用数据库来管理会更靠谱。前端存点简单的用户偏好设置还行，表单数据还是交给后端吧。

2026-02-17 14:17