jQuery UI Datepicker 如何配置localStorage保存日期且刷新不丢失？

• 已定义的saveValue存储函数没有绑定到任何交互事件，选中日期的操作根本不会触发存储逻辑，localStorage始终没有写入日期数据
• 读取localStorage并给input赋值的代码，在DOM加载完成前就执行，会直接报错取不到元素，无法成功读取存储内容
• 初始化Datepicker时没有同步已存储的日期值，即便input上显示了历史日期，组件内部状态和实际选中值不匹配

• 所有初始化、赋值、事件绑定逻辑统一放在DOM就绪回调中执行，保证执行顺序正确
• 直接绑定Datepicker原生的onSelect事件，用户每次选完日期就自动将值写入localStorage
• 初始化Datepicker时，将localStorage中存储的日期作为默认选中值，同步组件内部状态
• 优化取值判断逻辑，避免将合法的空字符串误判为无存储数据

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - 本地存储持久化</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  // 本地存储取值函数
  function getSavedValue(key){
    const savedVal = localStorage.getItem(key);
    return savedVal ? savedVal : "";
  }

  $( function() {
    // 页面加载时先读取本地存储的历史日期
    const savedDate = getSavedValue("datepicker");
    // 初始化Datepicker，绑定选中事件自动存储
    $( "#datepicker" ).datepicker({
      defaultDate: savedDate,
      onSelect: function(dateText){
        // 选中日期时直接写入localStorage
        localStorage.setItem("datepicker", dateText);
      }
    });
    // 将存储的日期赋值给input框，保证显示一致
    $("#datepicker").val(savedDate);
  } );
  </script>
</head>
<body>
  <div id="date">
    <p>Date: <input type="text" id="datepicker"></p>
  </div>
</body>
</html>

• 不需要额外给input绑定原生change/input事件触发存储，Datepicker的onSelect事件会在用户点击选完日期时立即触发，比原生事件响应更可靠
• 原代码中直接在脚本顶部写document.getElementById("datepicker")的写法，会因为脚本在head中执行时DOM还未解析完成，直接抛出null错误，导致整个localStorage逻辑失效

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