点击笔记保存按钮后页面自动刷新，无法渲染更新内容

核心问题：表单默认提交行为导致页面刷新 #

你的Save按钮放在<form>标签内，点击时会触发表单的默认提交行为，浏览器会自动刷新页面，这直接打断了后续的渲染逻辑，所以页面没来得及显示更新后的内容就被刷新重置了。

解决方法：阻止按钮的默认行为 #

在点击事件处理函数开头添加event.preventDefault()，就能阻止表单提交的默认行为，让后续的更新和渲染逻辑正常执行：

editBtn.addEventListener("click", function (event) {
  // 阻止表单默认提交行为，避免页面刷新
  event.preventDefault();
  
  let myNotes = JSON.parse(localStorage.getItem("notes"));
  let savedIndex;
  for (let i = 0; i < myNotes.length; i++) {
    if (myNotes[i].name === noteObject.name) {
      myNotes.splice(i, 1);
      savedIndex = i;
    }
  }
  noteObject.body = editBodyEl.value;
  myNotes.push(noteObject);
  updateNotes(myNotes);
  bodyRenderEl.className = "visible";
  editEl.className = "d-none";
  renderNoteBody();
});

额外优化：数组更新逻辑的潜在问题 #

你当前的逻辑是删除旧笔记后，将修改后的笔记追加到数组末尾，这会改变笔记的原有排序。如果希望保持笔记的原始位置，可以直接修改对应索引的元素，无需删除再添加：

editBtn.addEventListener("click", function (event) {
  event.preventDefault();
  
  let myNotes = JSON.parse(localStorage.getItem("notes"));
  // 找到目标笔记直接更新内容，无需删除后再追加
  for (let i = 0; i < myNotes.length; i++) {
    if (myNotes[i].name === noteObject.name) {
      myNotes[i].body = editBodyEl.value;
      break; // 找到目标后立即终止循环，提升效率
    }
  }
  updateNotes(myNotes);
  bodyRenderEl.className = "visible";
  editEl.className = "d-none";
  renderNoteBody();
});

调整后，页面不会再刷新，renderNoteBody()也能正常渲染出更新后的笔记内容。

内容的提问来源于stack exchange，提问作者Симо Рађеновић