如何使用Local Storage存储并获取两组不同的用户输入数据？

代码问题排查 #

• 第一行错误覆盖了原生localStorage对象：localStorage = "itsStorage"; 直接把浏览器提供的本地存储API对象替换成了普通字符串，后续所有setItem、getItem调用都会失效
• 没有阻止表单提交的默认刷新行为：点击提交按钮后页面会自动刷新，刚写入存储的数据还没渲染就被重置了
• localStorage的使用逻辑错误：getItem() 仅接收1个key参数，你传入2个DOM元素参数完全无法实现读取效果；同时你没有做页面初始化时的历史数据读取逻辑，刷新页面后历史存储数据不会展示
• 没有给表单绑定提交事件，你写的addVal函数不会被触发执行
• HTML的第二个label文本错误，和第一个重名，会误导用户输入
• 存储结构不合理：直接用输入的name作为key存储，重复输入同一个name会直接覆盖旧数据，也不利于后续批量读取所有存储记录

修复后代码 #

HTML代码

<aside class="input">
  <form action="#" id="form">
    <div class="form-section">
      <label for="name">Input Name</label>
      <input type="text" id="name" required>
    </div>
    <div class="form-section">
      <label for="title">Input Title</label>
      <input type="text" id="title" required>
    </div>
    <button class="submit-btn">Submit</button>
  </form>
</aside>
<!-- 输出容器，若你页面已有对应结构可直接删除此行 -->
<div class="list-output"></div>

JavaScript代码

// 页面加载完成后初始化逻辑
document.addEventListener('DOMContentLoaded', () => {
  // 渲染历史存储数据
  renderHistory();
  // 绑定表单提交事件
  document.getElementById('form').addEventListener('submit', (e) => {
    // 阻止表单默认刷新行为
    e.preventDefault();
    addVal();
  })
})

function addVal() {
  const takeName = document.getElementById("name").value.trim();
  const takeTitle = document.getElementById("title").value.trim();
  // 读取现有存储数据，无数据则初始化空数组
  const storageList = JSON.parse(localStorage.getItem('itsStorage') || '[]');
  // 新增当前提交的数据
  storageList.push({name: takeName, title: takeTitle});
  // 转换为JSON字符串存回localStorage
  localStorage.setItem('itsStorage', JSON.stringify(storageList));
  // 渲染新提交的内容
  wrapper(takeName, takeTitle);
  // 清空输入框
  document.getElementById('form').reset();
}

function wrapper(itsName, itsTitle) {
  const name = document.createElement("h2");
  name.innerText = itsName;
  const title = document.createElement("p");
  title.innerText = itsTitle;
  const div = document.createElement("div");
  div.classList.add("list");
  div.append(name, title);
  const outList = document.querySelector(".list-output");
  outList.append(div);
}

// 读取历史数据批量渲染
function renderHistory() {
  const storageList = JSON.parse(localStorage.getItem('itsStorage') || '[]');
  storageList.forEach(item => {
    wrapper(item.name, item.title);
  })
}

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