为 Datepicker 设置本地存储答案

【问题标题】：Setting local storage for Datepicker为 Datepicker 设置本地存储
【发布时间】：2021-04-20 22:51:15
【问题描述】：

我有一个显示日期选择器的 J 查询代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 
<div id = "date">
<p>Date: <input type="text" id="datepicker"></p>
 </div>
 
</body>
</html>

我已尝试使用本地存储将日期保存在文本字段中，但它似乎会在页面刷新时擦除。请帮忙。非常感谢您的宝贵时间。

我的本地存储代码

<script type="text/javascript">
        document.getElementById("datepicker").value = getSavedValue("datepicker");    // set the value to this input
       
        /* Here you can add more inputs to set value. if it's saved */

        //Save the value function - save it to localStorage as (ID, VALUE)
        function saveValue(e){
            var id = e.id;  // get the sender's id to save it . 
            var val = e.value; // get the value. 
            localStorage.setItem(id, val);// Every time user writing something, the localStorage's value will override . 
        }

        //get the saved value function - return the value of "v" from localStorage. 
        function getSavedValue  (v){
            if (!localStorage.getItem(v)) {
                return "";// You can change this to your defualt value. 
            }
            return localStorage.getItem(v);
        }
</script>

【问题讨论】：

您可以尝试将<script> 标签放在body 元素的末尾吗？
@JCH 成功了吗？
不，没有。当我刷新输入文本文件时没有 valuer
什么时候调用saveValue方法？

标签： javascript html jquery local-storage

【解决方案1】：

检查下面的 sn-p 以使用 localStorage 存储和更新数据

使用onClose 事件关闭日期选择器时使用所选日期更新localStorage
在加载文档时将日期从 localStorage 设置回日期选择器

注意：由于在下面的沙箱中无法访问 localStorage，因此代码片段会引发错误。

var storage = {
    saveDate: function (dateText, instance) {
        // If not valid date take last selected value
        var validDateText = dateText ? (dateText.match(/\d{2}\/\d{2}\/\d{4}/) || [instance.lastVal])[0] : "";
        var data = JSON.parse(localStorage.getItem('jq-ui-datepicker') || "{}");
        data[instance.id] = validDateText;
        localStorage.setItem('jq-ui-datepicker', JSON.stringify(data));
        instance.input.val(validDateText);
    },
    getDate: function () {
        var data = JSON.parse(localStorage.getItem('jq-ui-datepicker') || "{}");
        $(".datepicker").each(function () {
            var $this = $(this),
                dateText = data[$this.attr('id')];
            if (dateText) {
                // Set date to datepicker
                $this.datepicker('setDate', dateText);
            }
        })
    }
}
$(function () {
    $(".datepicker").datepicker({
        onClose: storage.saveDate
    });
    storage.getDate();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
    integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA=="
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
    integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
    crossorigin="anonymous" />

<div id="date">
    <p>Date - 1: <input type="text" id="date1" class="datepicker"></p>
    <p>Date - 2: <input type="text" id="date2" class="datepicker"></p>
</div>

【讨论】：