修复JavaScript localStorage存储段落无法在页面正常显示的问题

1. 函数内while循环逻辑存在多处错误 #

现有循环逻辑完全无法正常工作，具体问题如下：

• 存在语法错误：函数体末尾多写了一个闭合大括号}，会直接导致JS解析失败，整个函数无法执行
• 第二个渲染循环为死循环：循环判断条件为while(n)，但循环内部执行n++，n值只会持续增大永远不为0，会直接导致页面卡死
• 读取存储值的逻辑错误：读取localStorage时没有拼接索引后缀，永远在读取key为content的值，和你实际存储用的content0/content1这类key不匹配，根本拿不到存入的段落内容
• 遍历逻辑缺失：循环没有按索引依次读取对应存储项的设计，完全无法实现遍历所有段落的效果
• 没有做渲染前清空：重复调用函数时会重复追加已有内容，造成列表重复

2. 函数调用方式存在明显隐患 #

现有直接顶层调用的写法兼容性很差：

• 如果脚本标签放在HTML的<head>区域，或者放在id为content的DOM元素之前，脚本执行时DOM树还没渲染完成，document.getElementById("content")会拿到null，后续追加元素的操作会直接报错
• 没有在新增段落的逻辑里触发重渲染，新存入的内容不会实时展示在页面上

修正后可直接运行的代码 #

const mybutton = document.getElementById("addbutton");
const mytext = document.getElementById("mytext");
const content = document.getElementById("content");  

function displaylocalstorage() {
  // 先清空容器，避免重复渲染旧内容
  content.innerHTML = '';
  let index = 0;
  // 从索引0开始遍历所有存在的段落存储项
  while (localStorage.getItem("content" + index)) {
    const paragraph = document.createElement("p");
    // 读取对应索引的段落内容
    paragraph.innerText = localStorage.getItem("content" + index);
    content.appendChild(paragraph);
    index++;
  }
}

// 补全段落存储逻辑示例
function storedparagraphs(text) {
  let index = 0;
  // 找到第一个未被使用的存储索引
  while (localStorage.getItem("content" + index)) {
    index++;
  }
  localStorage.setItem("content" + index, text);
  // 存储完成后重新渲染列表
  displaylocalstorage();
}

// 兼容DOM未加载完成的场景，DOM就绪后再执行初始渲染
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", displaylocalstorage);
} else {
  displaylocalstorage();
}

// 绑定新增按钮点击事件
mybutton.addEventListener("click", () => {
  const inputVal = mytext.value.trim();
  if (inputVal) {
    storedparagraphs(inputVal);
    mytext.value = '';
  }
})

如果需要把最新存入的段落展示在列表最顶部，只需要把遍历逻辑改成从最大索引倒序读取即可。

内容的提问来源于stack exchange，提问作者dam's