笔记应用JavaScript代码无法在LocalStorage中存储笔记问题

你的代码核心问题有两个：一是localStorage的键名不匹配，二是直接存储innerHTML存在潜在冗余风险（你提到的"存储DOM节点"是误解，innerHTML本质是字符串，但键名错误才是导致读取失败的核心原因）。以下是具体修复步骤和优化后的代码：

核心问题分析 #

• showNotes() 读取的是 localStorage.getItem("notes")，但 updateStorage() 存储的是 localStorage.setItem("data", ...)，键名完全不一致，刷新后自然读不到之前的笔记。
• 直接存储innerHTML会把删除按钮的HTML结构也存进去，虽然能勉强工作，但不如存储纯文本数据更高效、可靠。

修复后的代码 #

const noteContainer = document.querySelector(".note-container");
const createBtn = document.querySelector(".btn");

// 从localStorage加载笔记
function loadNotes() {
  const savedNotes = JSON.parse(localStorage.getItem("notes")) || [];
  noteContainer.innerHTML = "";
  savedNotes.forEach(noteText => {
    createNoteElement(noteText);
  });
}

// 创建单个笔记元素
function createNoteElement(text = "") {
  const inputBox = document.createElement("p");
  const img = document.createElement("img");
  
  inputBox.className = "input-box";
  inputBox.setAttribute("contenteditable", "true");
  inputBox.textContent = text; // 用textContent避免XSS风险，仅存储纯文本
  img.src = "images/delete.png";
  
  inputBox.appendChild(img);
  noteContainer.appendChild(inputBox);
  
  // 绑定实时保存事件
  inputBox.addEventListener("keyup", saveNotes);
}

// 保存笔记到localStorage
function saveNotes() {
  const notes = Array.from(noteContainer.querySelectorAll(".input-box"))
    .map(note => note.textContent.trim())
    .filter(text => text !== ""); // 过滤空笔记，避免存储无效数据
  
  localStorage.setItem("notes", JSON.stringify(notes));
}

// 页面初始化时加载笔记
loadNotes();

// 创建新笔记按钮事件
createBtn.addEventListener("click", () => {
  createNoteElement();
});

// 事件委托处理删除操作
noteContainer.addEventListener("click", function(e) {
  if (e.target.tagName === "IMG") {
    e.target.parentElement.remove();
    saveNotes();
  }
});

关键优化点 #

1. 统一键名：全程使用"notes"作为localStorage的键，确保读写逻辑一致。
2. 存储纯文本数组：提取每个笔记的文本内容存成数组，用JSON.stringify序列化，避免存储冗余的HTML结构，同时降低XSS风险。
3. 高效事件处理：删除操作使用事件委托，新创建的笔记直接绑定keyup事件，避免重复绑定导致的性能问题。
4. 过滤无效数据：保存时自动过滤空笔记，减少localStorage的无效存储。

现在刷新页面后，笔记就能正常保存和加载了。

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