如何将localStorage存储的表单输入值正确赋值到div元素

你的代码不生效是三个低级错误导致的：

• localStorage.getItem() 语法只接收1个入参（即存储时的键名），你写的第二个参数是未定义的游离变量，会直接触发JS引用错误，后续所有代码都会中断执行。
• 自定义的提交函数命名为submit，和DOM原生的表单提交方法重名，会触发函数调用冲突。
• 提交按钮点击后默认会触发页面刷新，你只在页面load事件里绑定了读取逻辑，提交后页面刷新的时序问题可能导致数据还没写入存储就被读取，同时同页提交后没有主动触发渲染，必须手动二次刷新才可能看到内容。

页面结构部分 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- 表单输入区域 -->
<div class="row mx-auto">
  <div class="border border-dark border-end-0 col-sm-3 brdr">
    <h4 class="d-inline">Name</h4>
    <p class="d-inline">* (same as ID proof)</p>
  </div>
  <div class="border border-dark border-end-0 col-sm-2 brdr">
    <input type="text" id="prefix" class="form-control form-control-sm border-0" placeholder="prefix">
  </div>
  <div class="border border-dark border-end-0 col-sm-3 brdr">
    <input type="text" id="fname" class="form-control form-control-sm border-0" placeholder="first name">
  </div>
  <div class="border border-dark border-end-0 col-sm-2 brdr">
    <input type="text" id="mname" class="form-control form-control-sm border-0" placeholder="middle name">
  </div>
  <div class="border border-dark col-sm-2">
    <input type="text" id="lname" class="form-control form-control-sm border-0" placeholder="last name">
  </div>
</div><br>
<div class="d-flex justify-content-center">
  <input type="submit" id="submit" onclick="handleFormSubmit(event);">
</div>

<!-- 结果展示区域 -->
<div class="row mx-auto">
  <div class="border border-dark border-end-0 col-sm-3 brdr">
    <h4 class="d-inline">Name</h4>
    <p class="d-inline">* (same as ID proof)</p>
  </div>
  <div class="border border-dark border-end-0 col-sm-2 brdr" id="o-prefix"></div>
  <div class="border border-dark border-end-0 col-sm-3 brdr" id="o-fname"></div>
  <div class="border border-dark border-end-0 col-sm-2 brdr" id="o-mname"></div>
  <div class="border border-dark col-sm-2" id="o-lname"></div>
</div>

JS逻辑部分 #

// 抽离独立渲染函数，页面加载、提交成功后均可调用
function renderStoredName() {
  // 移除getItem多余参数，增加空值兜底
  const o_prefix = localStorage.getItem("prefix") ?? '';
  const o_fname = localStorage.getItem("fname") ?? '';
  const o_mname = localStorage.getItem("mname") ?? '';
  const o_lname = localStorage.getItem("lname") ?? '';

  // 纯文本内容用textContent插入，避免XSS风险
  document.getElementById('o-prefix').textContent = o_prefix;
  document.getElementById('o-fname').textContent = o_fname;
  document.getElementById('o-mname').textContent = o_mname;
  document.getElementById('o-lname').textContent = o_lname;
}

// 重命名函数避免和原生submit方法冲突，接收事件对象
function handleFormSubmit(e) {
  // 阻止按钮默认的表单提交刷新行为
  e.preventDefault();
  // 读取输入值时做首尾去空处理
  const prefix = document.getElementById("prefix").value.trim();
  const fname = document.getElementById("fname").value.trim();
  const mname = document.getElementById("mname").value.trim();
  const lname = document.getElementById("lname").value.trim();

  // 写入localStorage
  localStorage.setItem("prefix", prefix);
  localStorage.setItem("fname", fname);
  localStorage.setItem("mname", mname);
  localStorage.setItem("lname", lname);

  // 写入完成立即触发渲染，无需刷新页面即可看到结果
  renderStoredName();
}

// 页面首次加载时渲染之前存储的数据
window.addEventListener('load', renderStoredName);

• 修正getItem的错误传参，仅保留必填的键名参数，解决JS报错阻断执行的问题。
• 重命名提交处理函数，解决和原生API重名的冲突问题。
• 阻止提交按钮的默认刷新行为，避免页面重载导致的存储、读取时序异常。
• 抽离公共渲染逻辑，提交成功后立即更新展示内容，无需手动刷新页面。
• 增加空值兜底，未存储数据时默认展示空字符串，避免页面显示null。
• 用textContent替代innerHTML渲染纯文本，规避XSS安全风险，渲染性能更高。

内容的提问来源于stack exchange，提问作者Md Mohtesham Azam