localStorage永久存储失效问题解决方案（之一）

最新推荐文章于 2024-05-09 09:31:53 发布

vastSky0

最新推荐文章于 2024-05-09 09:31:53 发布

阅读量1k

点赞数

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/NEXT00/article/details/129152810

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

在实现todoList功能时遇到localStorage存储数据刷新后消失的问题。问题出在预先定义并存储了数据。注释掉预定义的数据，只保留空对象后，问题得到解决。可能的原因是localStorage只能存储字符串，而非直接的对象。解决方案是将对象转换为JSON字符串进行存储。

摘要由CSDN通过智能技术生成

在学习写日程表案例todoList的过程中遇到了localStorage永久存储失效问题。
当我在网页中输入待办事项并回车后，该事项保存到本地了，但刷新网页则立即消失。
在这里插入图片描述

在这里插入图片描述
通过测试，发现原因在于提前定义了对象属性并存储了数据：

var todoList=[
      {
        title:"今天要吃包子",
        done:false
      },{
        title:"今天要吃饺子",
        done:false
      }
    ];
    //只能保存字符串到本地，转换为json文件可以保留结构
    localStorage.setItem("todoList",JSON.stringify(todoList));