LocalStorage无法显示最新内容？文本框保存编辑问题求助

问题根源 #

1. 按钮默认提交触发页面刷新：HTML里的<button>未指定type="button"，默认属于submit类型，点击后会强制刷新页面——这就是修改内容后刷新丢失、点击保存后显示旧内容的核心原因，页面刷新会重置textarea，同时重新读取LocalStorage里的旧值。
2. 重复执行绑定函数：按钮上的onclick="fixTextarea()"完全多余，因为DOMContentLoaded已经触发了一次fixTextarea，每次点击按钮都会再跑一遍这个函数，重复绑定事件还可能覆盖当前输入的内容。

修复后的代码 #

HTML部分

<div class="roth_allgemein">
  <h2>Notizen</h2>
  <div class="Notizen">
    <textarea id="textarea"></textarea>
  </div>
  <!-- 新增type="button"阻止刷新，移除多余的onclick -->
  <button class="Absenden" id="speichern" type="button"><b>Speichern</b></button>
  <button class="Absenden" id="bearbeiten" type="button"><b>Bearbeiten</b></button>
</div>
<script src="test.js"></script>

JavaScript部分

function fixTextarea() {
  const textArea = document.getElementById("textarea");
  const speichernBtn = document.getElementById("speichern");
  const bearbeitenBtn = document.getElementById("bearbeiten");

  // 页面加载时读取LocalStorage内容
  const savedContent = localStorage.getItem("textareaContent");
  if (savedContent) {
    textArea.value = savedContent;
    // 可选：加载后默认设为只读，和保存状态一致
    textArea.readOnly = true;
    textArea.style.outline = "1px solid green";
    textArea.style.border = "none";
  }

  // 保存按钮逻辑
  speichernBtn.addEventListener("click", () => {
    textArea.readOnly = true;
    textArea.style.outline = "1px solid green";
    textArea.style.border = "none";
    localStorage.setItem("textareaContent", textArea.value);
  });

  // 编辑按钮逻辑
  bearbeitenBtn.addEventListener("click", () => {
    textArea.readOnly = false;
    textArea.style.outline = "1px solid green";
    textArea.style.border = "1px solid #ccc"; // 恢复边框
    textArea.focus(); // 自动聚焦，提升体验
  });
}

document.addEventListener("DOMContentLoaded", fixTextarea);

关键修复点说明 #

• 给按钮加type="button"：彻底解决页面刷新问题，保证保存操作完成后内容不会丢失。
• 移除按钮的onclick：避免重复绑定事件和重复读取LocalStorage，防止内容被意外覆盖。
• 用textArea.readOnly替代setAttribute：这是操作表单元素只读状态的标准方式，比DOM属性操作更可靠。
• 可选优化：加载时自动设为只读、编辑时自动聚焦，让交互更符合用户预期。

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