存储在localStorage的li元素页面刷新后不显示问题如何解决？

问题原因 #

1. 你仅在点击添加按钮时执行了创建li插入页面的逻辑，页面刷新后没有主动读取localStorage内容并渲染到页面，导致历史存储的内容不显示。
2. 你当前每次存储都使用同一个keyplan覆盖旧值，实际只能保存最后一条输入内容，无法实现多条li展示的需求。

解决方案 #

替换你的JS代码为以下内容即可实现需求：

const input = document.querySelector('#text-input');
const addBtn = document.querySelector('#add-plan-btn');
const ol = document.querySelector('ol');

// 页面加载完成后渲染已存储的计划
window.addEventListener('load', renderPlans);
addBtn.addEventListener('click', addNewPlan);

// 从localStorage读取所有计划
function getPlansFromStorage() {
  const savedPlans = localStorage.getItem('plans');
  return savedPlans ? JSON.parse(savedPlans) : [];
}

// 渲染所有计划到列表
function renderPlans() {
  const plans = getPlansFromStorage();
  // 清空现有列表避免重复渲染
  ol.innerHTML = '';
  plans.forEach(planText => {
    const li = document.createElement('li');
    li.textContent = planText;
    ol.appendChild(li);
  });
}

// 添加新计划逻辑
function addNewPlan() {
  const inputContent = input.value.trim();
  // 过滤空输入
  if (!inputContent) return;
  const plans = getPlansFromStorage();
  // 新增内容到数组
  plans.push(inputContent);
  // 序列化后存入localStorage
  localStorage.setItem('plans', JSON.stringify(plans));
  // 刷新页面列表
  renderPlans();
  // 清空输入框提升体验
  input.value = '';
}

修改说明 #

• 采用数组存储多条计划，通过JSON序列化后存入localStorage，解决单key覆盖历史内容的问题
• 页面加载时主动调用渲染逻辑，保证刷新后历史内容正常展示
• 新增空输入过滤、输入框自动清空的优化逻辑，避免无效内容存储

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