如何通过按钮实现文本输入内容存入localStorage并读取展示

问题原因 #

• 存储逻辑错误：连续三次给localStorage的同一个display键赋值，后续赋值会直接覆盖前一次的内容，最终只能保存最后一个course输入框的内容，姓名和年龄数据全部丢失
• 读取逻辑不符合需求：原有show_local函数是把存储内容回填到三个输入框，你实际需要的是将所有存储内容展示到id为display的textarea中
• 遗漏了localStorage的存储限制：localStorage仅支持存储字符串类型数据，若要存储多条结构化数据需要先做序列化处理

修正后的代码 #

JS部分

<script>
function add_local(){
  // 收集所有输入框内容整理为结构化对象，序列化为JSON字符串后存储
  const formData = {
    firstname: document.getElementById('firstname').value.trim(),
    age: document.getElementById('age').value.trim(),
    course: document.getElementById('course').value.trim()
  }
  window.localStorage.setItem('display', JSON.stringify(formData))
  // 可选：存储完成后清空输入框，不需要可以删掉下面三行
  document.getElementById('firstname').value = ''
  document.getElementById('age').value = ''
  document.getElementById('course').value = ''
}

function show_local(){
  // 读取存储内容，反序列化后格式化展示到textarea
  const rawData = window.localStorage.getItem('display')
  const displayEle = document.getElementById('display')
  if (!rawData) {
    displayEle.value = '当前localStorage中无存储数据'
    return
  }
  const parsedData = JSON.parse(rawData)
  // 可自行调整展示的文本格式
  displayEle.value = `姓名：${parsedData.firstname}
年龄：${parsedData.age}
最喜欢的课程：${parsedData.course}`
}
</script>

原有HTML结构不需要修改可以直接复用，若要实现sessionStorage的存储和展示功能，逻辑和上面完全一致，只需要把localStorage替换为sessionStorage即可。

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