文本编辑器localStorage加载异常：清空后无法恢复历史内容求助

核心问题分析 #

输入内容刷新后localStorage能正常保留，说明save逻辑是有效的；但清空文本框刷新后无法加载，大概率是清空操作误删了localStorage中的数据，或者load逻辑存在判断漏洞（比如受当前文本框状态影响，未正确读取存储值）。

针对性修复步骤 #

1. 修正清空按钮逻辑 #

确保清空仅重置文本框内容，不要删除localStorage中的对应键值：

// 错误示例（误删存储）
function clearText() {
  document.getElementById('editor').value = '';
  localStorage.removeItem('editorContent'); // 这行是问题根源
}

// 正确逻辑
function clearText() {
  document.getElementById('editor').value = '';
}

2. 完善加载按钮逻辑 #

加载时直接读取localStorage原始值，不受当前文本框状态干扰：

// 错误示例（判断逻辑错误）
function loadFromStorage() {
  const content = document.getElementById('editor').value || localStorage.getItem('editorContent');
  document.getElementById('editor').value = content;
}

// 正确逻辑
function loadFromStorage() {
  const savedContent = localStorage.getItem('editorContent');
  if (savedContent !== null) { // 仅当存储存在时赋值
    document.getElementById('editor').value = savedContent;
  }
}

3. 确认Save按钮逻辑 #

点击Save时，确保将当前文本框内容存入localStorage（如需禁止空内容保存可添加判断）：

// 基础保存逻辑
function saveToStorage() {
  const content = document.getElementById('editor').value;
  localStorage.setItem('editorContent', content);
}

// 可选：禁止保存空内容
function saveToStorage() {
  const content = document.getElementById('editor').value;
  if (content.trim()) {
    localStorage.setItem('editorContent', content);
  } else {
    alert('内容为空，未执行保存');
  }
}

4. 验证存储状态 #

在浏览器控制台执行localStorage.getItem('editorContent')，确认清空文本框并刷新后，存储的值是否仍存在。如果不存在，需检查页面初始化代码是否有localStorage.clear()或误删操作。

完整可运行示例 #

<textarea id="editor" rows="10" cols="50"></textarea>
<button onclick="saveToStorage()">Save</button>
<button onclick="loadFromStorage()">Load from Storage</button>
<button onclick="clearText()">Clear</button>

<script>
// 页面加载时自动读取存储（可选）
window.onload = loadFromStorage;

function saveToStorage() {
  const content = document.getElementById('editor').value;
  localStorage.setItem('editorContent', content);
}

function loadFromStorage() {
  const savedContent = localStorage.getItem('editorContent');
  if (savedContent !== null) {
    document.getElementById('editor').value = savedContent;
  }
}

function clearText() {
  document.getElementById('editor').value = '';
}
</script>

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