localStorage存储展示异常：所有字段显示同一内容、邮箱数据不显示

问题排查 #

你代码里的问题主要有以下几个：

• 存储/读取逻辑不合理：你将三个字段拼接为单个字符串存入textinput，读取时直接把完整字符串赋值给三个表格单元格，自然三个单元格内容完全一致，也无法拆分出单独的邮箱信息。旧版saveTo多次对同一个key赋值，后续写入会直接覆盖之前的内容，最终只能保留最后一次写入的字段值。
• 邮箱输入的事件监听绑定错误：你给表格的邮箱单元格inputEmail绑定了input事件，但实际应该绑定到表单的邮箱输入框email上，这就导致你在邮箱输入框填写内容时，表格的邮箱单元格不会同步更新，存储时拿到的邮箱内容永远是初始值，自然显示不出来。
• 未阻止表单默认提交行为：你的按钮是form内的submit类型，点击后会触发表单默认提交刷新页面，可能导致存储逻辑未执行完成就刷新，数据丢失。

修正后的JavaScript代码 #

// 表格元素
const firstName = document.querySelector('.tablefirstname');
const lastName = document.querySelector('.tablelastname');
const tableEmail = document.querySelector('.tableemail');

// 表单元素
const inputFirst = document.querySelector('.inputone');
const inputSecond = document.querySelector('.inputtwo');
const inputEmail = document.querySelector('.email');
const form = document.querySelector('#form');

// 读取本地存储
const storedData = localStorage.getItem('userInfo');
if (storedData) {
    // 用JSON存储对象，方便拆分多个字段
    const { first, last, email } = JSON.parse(storedData);
    firstName.textContent = first;
    lastName.textContent = last;
    tableEmail.textContent = email;
    // 回显到输入框
    inputFirst.value = first;
    inputSecond.value = last;
    inputEmail.value = email;
}

// 输入同步逻辑
inputFirst.addEventListener('input', e => {
    firstName.textContent = e.target.value
})

inputSecond.addEventListener('input', e => {
    lastName.textContent = e.target.value
})

// 修正监听对象为表单的邮箱输入框
inputEmail.addEventListener('input', e => {
    tableEmail.textContent = e.target.value
})

// 阻止表单默认提交刷新
form.addEventListener('submit', e => {
    e.preventDefault();
    saveTo();
})

// 存储逻辑改为存JSON对象，区分三个字段
const saveTo = () => {
    const userInfo = {
        first: firstName.textContent,
        last: lastName.textContent,
        email: tableEmail.textContent
    }
    localStorage.setItem('userInfo', JSON.stringify(userInfo))
}

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