如何使用JSON将待办应用列表保存到Local Storage？附现有代码

没问题！要让添加的列表项在刷新浏览器后还能保留，咱们可以用浏览器的localStorage来持久化数据，再通过JSON来处理数据的序列化和反序列化——毕竟localStorage只能存字符串，JSON刚好能帮咱们把数组/对象转成字符串存进去，取出来再转回来用。

我给你一步步拆解具体操作：

1. 每次修改列表后，把数据存到localStorage #

不管是添加新项还是删除旧项，操作完成后都要把当前的列表内容转成JSON字符串，存在localStorage里。比如写一个专门的保存函数：

// 保存当前列表到localStorage
function saveListToStorage() {
  // 获取所有列表项的文本内容，转成数组
  const listItems = Array.from(document.getElementById('your-list-id').children)
    .map(li => li.textContent);
  
  // 把数组转成JSON字符串，存到localStorage
  localStorage.setItem('savedListItems', JSON.stringify(listItems));
}

然后在你的添加项函数里，创建完新的列表元素后，调用这个保存函数：

function addNewItem() {
  const input = document.getElementById('your-input-id');
  const itemText = input.value.trim();
  
  if (!itemText) return;
  
  // 创建新的列表项并添加到页面
  const li = document.createElement('li');
  li.textContent = itemText;
  document.getElementById('your-list-id').appendChild(li);
  
  input.value = ''; // 清空输入框
  
  // 保存到本地存储
  saveListToStorage();
}

2. 页面加载时，从localStorage恢复列表 #

当页面刚打开的时候，检查localStorage里有没有之前保存的数据，如果有，就把JSON字符串转成数组，再把每个项添加到页面的列表里：

// 页面初始化时恢复列表
window.addEventListener('DOMContentLoaded', () => {
  // 从localStorage取出保存的JSON字符串
  const savedItems = localStorage.getItem('savedListItems');
  
  if (savedItems) {
    // 把JSON字符串转成数组
    const itemsArray = JSON.parse(savedItems);
    const listContainer = document.getElementById('your-list-id');
    
    // 循环数组，创建列表项并添加到页面
    itemsArray.forEach(itemText => {
      const li = document.createElement('li');
      li.textContent = itemText;
      listContainer.appendChild(li);
    });
  }
});

额外注意点 #

• 如果你的列表有删除、编辑功能，记得在完成这些操作后也调用saveListToStorage()，保证本地存储的数据和页面同步。
• localStorage是和当前域名绑定的，换浏览器或者清除浏览器缓存的话，数据会丢失。如果需要跨设备保留数据，那就要配合后端接口把数据存在服务器上，但这个方案已经能满足你“刷新页面保留列表”的需求啦。

这样改完之后，你添加的列表项就会稳稳存在浏览器里，刷新页面也不会消失了～

内容的提问来源于stack exchange，提问作者Nischal