如何使用sessionStorage存储读取并自动回填date类型日期输入框内容

• 缺少存储触发逻辑：现有代码没有给表单绑定提交事件，用户点击提交按钮时没有执行storeBooking方法，sessionStorage内从未写入过日期值，自然读取不到内容回填
• date类型输入框有格式要求：<input type="date">的value属性仅支持YYYY-MM-DD格式的字符串，只要赋值格式不符合就会失效，显示默认占位符

HTML 代码 #

<form id="birthForm">
  <label for="start">Date of birth:</label>
  <input type="date" id="start" required="required" name="date of birth" value="2021-10-04" />
  <input type="submit" value="Apply">
</form>

JS 代码 #

// 存储日期到sessionStorage
function storeBooking(start) {
  sessionStorage.setItem('start', start);
}

// 页面加载完成后回填
function prefillcard() {
  const savedStart = sessionStorage.getItem('start');
  // 只有存在存储值时才赋值
  if (savedStart) {
    document.getElementById("start").value = savedStart;
  }
}

// 页面加载完成执行回填
window.addEventListener("DOMContentLoaded", prefillcard);

// 绑定表单提交事件，提交前先存储日期
document.getElementById('birthForm').addEventListener('submit', function() {
  const startVal = document.getElementById('start').value;
  storeBooking(startVal);
});

• date输入框自身的value属性返回值本身就是YYYY-MM-DD标准格式，直接存储即可，不需要额外做格式转换
• 用sessionStorage.setItem/getItem读写值比直接挂载属性更规范，可避免读写异常
• 提交表单时先执行存储逻辑，再走默认的表单提交/跳转逻辑，保证跳转后仍能读取到存储的日期值

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