JS向HTML页面任务列表添加任务仅存单个，如何实现多任务保存？

你的代码存在3个核心错误导致无法正常添加多任务，以下是修复方案： #

核心问题 #

• 表单默认提交行为没有被正确阻止：你的preventDefault()绑定在了新建的div元素上，完全没有生效。点击提交按钮后表单会默认刷新页面，之前动态添加的任务会被重置，看起来就像被新任务覆盖
• 表单值获取逻辑错误：words.get('message') 不是标准的表单元素取值写法，无法正确拿到textarea输入的内容
• 缺持久化存储逻辑：如果需要页面刷新后已添加的任务不丢失，需要借助localStorage本地存储任务列表

修正后代码 #

HTML部分（仅调整form标签属性） #

<h2>Future Projects</h2>
<div id="projects">
    <div class="project">first</div>
    <div class="project">y</div>
    <div class="project">last</div>
</div>
<!-- 修正form的method属性写法，新增id方便绑定事件 -->
<form action="index.html" method="get" id="projectForm">
    <label for="message">Meaningful Message:</label>
    <br>
    <textarea name="message" id="message" rows="1" cols="20"></textarea>
    <br>
    <input type="submit" value="submit">
</form>

JS部分 #

// 页面加载时先读取本地存储的任务列表，没有存储内容则默认是空数组
const projects = JSON.parse(localStorage.getItem('projectList') || '[]')
const projectWrap = document.getElementById('projects')
const form = document.getElementById('projectForm')
const textarea = document.getElementById('message')

// 任务列表渲染方法
function renderProjects() {
  // 保留页面初始的3个静态任务
  const staticProjects = Array.from(projectWrap.querySelectorAll('.project')).slice(0,3)
  projectWrap.innerHTML = ''
  staticProjects.forEach(item => projectWrap.appendChild(item))
  // 渲染所有已存储的自定义任务
  projects.forEach(text => {
    const e = document.createElement('div')
    e.className = 'project'
    e.textContent = text
    projectWrap.appendChild(e)
  })
}
// 进入页面先执行一次渲染
renderProjects()

// 监听表单提交事件
form.addEventListener('submit', function(e) {
  // 阻止表单默认提交刷新行为，这步是解决覆盖问题的核心
  e.preventDefault()
  const inputVal = textarea.value.trim()
  if(inputVal) {
    // 把新任务加入任务列表
    projects.push(inputVal)
    // 更新本地存储
    localStorage.setItem('projectList', JSON.stringify(projects))
    // 重新渲染列表
    renderProjects()
    // 清空输入框方便下次输入
    textarea.value = ''
  }
})

如果你不需要页面刷新后保留任务，可以去掉localStorage相关的逻辑，只保留表单提交监听和阻止默认行为的部分，也可以实现单次会话内添加多个任务的效果。

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