待办清单网站技术咨询：任务保存实现及输入框显示异常排查

问题2：输入框无法实时显示输入内容的原因 #

从你提供的代码来看，输入框本身的HTML和JS逻辑没有直接导致无法实时显示输入内容的问题。可能的原因如下：

• CSS样式冲突：最常见的情况是输入框的文字颜色（color）与背景色（background-color）设置为同一颜色，导致输入的文字肉眼不可见；或者输入框被其他元素（比如页面中的#c容器）遮挡，无法正常显示输入内容。检查你的CSS代码，确保输入框的样式设置正确。
• 输入框未获得焦点：如果没有点击输入框就直接输入，内容不会被输入框捕获，但这种情况属于操作问题，而非代码问题。
• 浏览器缓存或异常：极少数情况下，浏览器缓存或临时异常可能导致输入框显示异常，可以尝试刷新页面或更换浏览器测试。

如果没有额外的CSS代码，建议先给输入框添加基础样式测试：

#textInput {
  color: #000;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 4px;
}

问题1：实现用户任务保存功能的方案 #

根据需求不同，有几种常见的实现方式：

1. 本地存储（LocalStorage） #

适合不需要跨设备同步的场景，数据保存在用户浏览器中，页面刷新或关闭后不会丢失。

修改现有代码即可实现：

<script>
const main = document.querySelector("#main");
const inputText = document.querySelector("#textInput");
const taskBtn = document.querySelector("#addTask");

// 页面加载时读取本地存储的任务
window.addEventListener('load', () => {
  const savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
  savedTasks.forEach(task => addTask(task));
});

function addTask(taskData) {
  const task = document.createTextNode(taskData);
  main.appendChild(task);
  main.appendChild(document.createElement("br"));
  
  // 将任务保存到LocalStorage
  const savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
  savedTasks.push(taskData);
  localStorage.setItem('tasks', JSON.stringify(savedTasks));
}

taskBtn.addEventListener("click", () => {
  if (inputText.value.trim() === "") {
    alert("请输入任务内容！");
  } else {
    addTask(inputText.value);
    inputText.value = "";
  }
});
</script>

2. 后端数据库存储 #

如果需要跨设备同步任务，需要搭建后端服务，通过API接口与前端交互，将任务数据存储到数据库（如MySQL、MongoDB等）。大致流程：

• 后端编写接口：处理任务的添加、查询、删除请求
• 前端通过fetch或axios发送请求，与后端交互
• 数据库持久化存储任务数据

3. SessionStorage（临时存储） #

与LocalStorage类似，但数据仅在当前会话有效，关闭浏览器后数据会被清除，适合临时保存任务。实现方式和LocalStorage基本一致，只需将localStorage替换为sessionStorage即可。

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