基于window.localStorage的Electron倒计时器本地存储实现问题求助

核心问题说明 #

你当前的本地存储逻辑存在4个基础错误，导致持久化功能失效：

• localStorage仅支持存储字符串类型，直接存储Date对象会被转为无效的[object Date]字符串
• 原代码中userDate.value写法错误：Date对象不存在value属性，无法读取到有效内容
• 缺少页面初始化时的存储数据读取逻辑，即使数据成功存储，应用重启后也不会自动加载
• 每秒执行的enterSpecialDate函数中不应重复执行存储逻辑，仅需在用户点击提交按钮时存储一次即可

完整修改代码 #

JS部分修改 #

// Event listener made to work with Materialize's .hide class
let hideInput = document.getElementById('input-hide');
let hideCountdown = document.getElementById('countdown-hide');
let button = document.querySelector("button");

button.addEventListener('click', () => {
    // 点击按钮时存储用户输入的数据
    const inputDate = document.getElementById('special-date').value;
    const inputOccasion = document.getElementById('user-occasion').value;
    if (inputDate && inputOccasion) {
        localStorage.setItem('storedDate', inputDate);
        localStorage.setItem('storedOccasion', inputOccasion);
    }

    if (hideInput.classList.contains("hide")) {
        hideInput.classList.remove("hide");
        hideCountdown.setAttribute("class", "hide")
    } else {
        hideInput.setAttribute("class", "hide");
        hideCountdown.classList.remove("hide");
    }
});

// 初始化日期选择器
const Calender = document.querySelector('.datepicker');
M.Datepicker.init(Calender, {
    format: 'yyyy-mm-dd',
    firstDay: 1,
    minDate: new Date(), // 修复minDate配置，限制只能选今天及以后的日期
})

// 倒计时计算逻辑
function enterSpecialDate() {
    let userDate, userOccasion;
    // 优先从本地存储取数据，没有再取输入框内容
    const storedDate = localStorage.getItem('storedDate');
    const storedOccasion = localStorage.getItem('storedOccasion');
    if (storedDate && storedOccasion) {
        userDate = new Date(storedDate);
        userOccasion = storedOccasion;
    } else {
        userDate = new Date(document.getElementById('special-date').value);
        userOccasion = document.getElementById('user-occasion').value;
    }

    let currentTime = new Date();
    let diff = userDate - currentTime;
    if (diff < 0) diff = 0; // 避免日期过期后出现负数

    // 时间计算，增加个位数补0逻辑
    const d = Math.floor(diff / 1000 / 60 / 60 / 24);
    const h = Math.floor(diff / 1000 / 60 / 60) % 24;
    const m = Math.floor(diff / 1000 / 60) % 60;
    const s = Math.floor(diff / 1000) % 60;

    // 补0逻辑修复，替换原中文引号为英文引号
    document.getElementById('days').innerHTML = d < 10 ? '0' + d : d;
    document.getElementById('hours').innerHTML = h < 10 ? '0' + h : h;
    document.getElementById('minutes').innerHTML = m < 10 ? '0' + m : m;
    document.getElementById('seconds').innerHTML = s < 10 ? '0' + s : s;
    document.getElementById('userOccasionOutput').innerHTML = userOccasion;
}

// 页面初始化时判断是否有存储的数据，有则直接显示倒计时
window.onload = function() {
    const storedDate = localStorage.getItem('storedDate');
    const storedOccasion = localStorage.getItem('storedOccasion');
    if (storedDate && storedOccasion) {
        hideInput.setAttribute("class", "hide");
        hideCountdown.classList.remove("hide");
    }
    setInterval(enterSpecialDate, 1000);
}

其他调整 #

原HTML中"start again"链接点击后需要清除存储的数据，修改如下：

<a href="javascript:localStorage.clear();location.reload(true)">start again</a>

修复效果 #

• 应用首次打开时显示输入页面，用户提交数据后自动存储到localStorage
• 应用重启后自动读取已存储的日期与事件名，直接显示倒计时页面，无需重复录入
• 点击"start again"会清除存储数据，回到输入页面
• 同步修复了你注释中标注的minDate配置无效、个位数补0失效的问题

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