如何从Cookie取值填充日期输入框？解决刷新后日期框重置问题

我完全懂你的困扰——前两个输入框都能通过localStorage稳稳留住值，唯独日期输入框一刷新就重置，这确实挺闹心的。咱们来一步步排查解决：

问题根源 #

你的日期输入框初始是type="text"，只有聚焦时才切换为type="date"，这会触发两个关键问题：

• 页面加载时输入框还是text类型，你给它设置的value如果不符合date类型要求的YYYY-MM-DD格式，后续切换type后浏览器会直接清空内容
• 动态切换type的时机和赋值时机不匹配，导致输入框无法识别已存储的日期值

解决方案 #

方案1：直接使用type="date"（推荐）

去掉动态切换type的逻辑，直接把输入框设为type="date"，浏览器会自动处理格式校验和展示，存储读取也更顺畅：

修改后的HTML：

<div class="container-fuid">
  <div class="row col-sm-12">
    <div class="col-sm-6">
      <form class="form text-center" id="form1">
        Result: <input id="car_result" type="text" class="form-control"><br>
        Last name: <input id="car_action" type="text" class="form-control">
        <input placeholder="Initial date" class="textbox-n form-control borderform" type="date" name="dei" id="dei" /><br><br>
        <button>Filter</button>
      </form>
    </div>
  </div>
</div>

优化后的jQuery代码（用jQuery选择器简化逻辑）：

$(document).ready(function() {
  // 读取localStorage并为字段赋值
  $('#car_result').val(localStorage.getItem('item_result'));
  $('#car_action').val(localStorage.getItem('item_action'));
  
  // 日期字段单独处理，确保值存在再赋值
  const savedDate = localStorage.getItem('item_dei');
  if (savedDate) {
    $('#dei').val(savedDate);
  }
});

$(window).on('beforeunload', function() {
  // 页面刷新/关闭前存储各字段值
  localStorage.setItem('item_result', $('#car_result').val());
  localStorage.setItem('item_action', $('#car_action').val());
  localStorage.setItem('item_dei', $('#dei').val());
});

方案2：保留动态切换type的逻辑（若必须）

如果一定要保留「初始text、聚焦转date」的交互，需要调整赋值时机，先切换type再设置值：

修改后的jQuery代码：

$(document).ready(function() {
  $('#car_result').val(localStorage.getItem('item_result'));
  $('#car_action').val(localStorage.getItem('item_action'));
  
  const dateInput = $('#dei');
  const savedDate = localStorage.getItem('item_dei');
  
  // 先切换为date类型，再赋值确保格式被识别
  dateInput.attr('type', 'date');
  if (savedDate) {
    dateInput.val(savedDate);
  }
  
  // 保留聚焦逻辑（可选，防止意外重置type）
  dateInput.on('focus', function() {
    $(this).attr('type', 'date');
  });
});

$(window).on('beforeunload', function() {
  localStorage.setItem('item_result', $('#car_result').val());
  localStorage.setItem('item_action', $('#car_action').val());
  localStorage.setItem('item_dei', $('#dei').val());
});

额外提示 #

• type="date"输入框的值始终是YYYY-MM-DD格式，不管用户看到的本地化展示是什么样，所以存储读取时不用额外做格式转换
• 测试时记得选一个日期后刷新页面，确认值能正常保留

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