我这里有一个html,可根据输入时间执行简单的警报。我正在运行nodejs Web服务器,这是我的index.html

我的问题是单击“设置警报”按钮后,该功能会启动,但是当然,在重新加载页面后,一切都消失了。我已经阅读了有关本地存储的信息,但是我不知道如何在这种情况下实现它。我尝试使用Garlic.js,但仅适用于诸如文本字段和复选框之类的输入形式,而不适用于执行功能的按钮。



var alarmSound = new Audio();
alarmSound.src = 'alarm.mp3';
var alarmTimer;

function setAlarm(button) {
  var ms = document.getElementById('alarmTime').valueAsNumber;
  if (isNaN(ms)) {
    alert('Invalid Date');
    return;
  }

  var alarm = new Date(ms);
  var alarmTime = new Date(alarm.getUTCFullYear(), alarm.getUTCMonth(), alarm.getUTCDate(), alarm.getUTCHours(), alarm.getUTCMinutes(), alarm.getUTCSeconds());

  var differenceInMs = alarmTime.getTime() - (new Date()).getTime();

  if (differenceInMs < 0) {
    alert('Specified time is already passed');
    return;
  }

  alarmTimer = setTimeout(initAlarm, differenceInMs);
  button.innerText = 'Cancel Alarm';
  button.setAttribute('onclick', 'cancelAlarm(this);');
};

function cancelAlarm(button) {
  clearTimeout(alarmTimer);
  button.innerText = 'Set Alarm';
  button.setAttribute('onclick', 'setAlarm(this);')
};

function initAlarm() {
  alarmSound.play();
  document.getElementById('alarmOptions').style.display = '';
};

function stopAlarm() {
  alarmSound.pause();
  alarmSound.currentTime = 0;
  document.getElementById('alarmOptions').style.display = 'none';
  cancelAlarm(document.getElementById('alarmButton'));
};

function snooze() {
  stopAlarm();
  alarmTimer = setTimeout(initAlarm, 6000); // 5 * 60 * 100
};

<input id="alarmTime" type="datetime-local">
<button onclick="alarmButton" id="setAlarm(this);">Set Alarm</button>

<div id="alarmOptions" style="display: none;">
  <button onclick="snooze();">Snooze 5 minutes</button>
  <button onclick="stopAlarm();">Stop Alarm</button>
</div>

最佳答案

本地存储是跟踪会话/页面刷新之间的警报时间的好方法。

要将alarmTime保存到本地存储,请使用:

window.localStorage.setItem('alarmTime', alarmTime)


然后,当您要使用alarmTime时,请使用以下命令从本地存储中检索它:

window.localStorage.getItem('alarmTime')


需要注意的一件事是,本地存储至少在更流行的浏览器中仅存储字符串(请参见this post),因此请在此处记住这一点。

有关更多信息,请参见本地存储上的MDN文档:https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

要在刷新页面后再次执行函数,可以添加如下一行:

document.onload = () => setAlarm(button);


页面加载完成后,这将导致setAlarm被调用。

编辑

这是如何将上述信息合并到代码中的粗略布局。我认为将ms存储在本地存储中要好于alarmTime,这样,当文档加载时,您可以使用本地存储中的ms填充输入。

document.onload = function() {
    var ms = window.localStorage.getItem('ms');
    if (ms) {
        populateTimeInput(ms);
        var alarmButton = document.querySelector('#alarmButton');
        setAlarm(alarmButton);
    }
}

function populateTimeInput(newTime) {
    var timeInput = document.querySelector('#alarmTime');
    timeInput.value = newTime;
}

function setAlarm(button) {
    var ms = document.getElementById('alarmTime').valueAsNumber;
    if (isNaN(ms)) {
        alert('Invalid Date');
        return;
    }

    window.localStorage.setItem('ms', ms);

    // then everything else is the same
}

function cancelAlarm(button) {
    window.localStorage.clear();
    // and everything else the same
}


此代码添加了三点主要内容:


页面加载完成后,此代码将检查ms的本地存储,如果找到ms的值,则会使用找到的值填充alarmTime输入,然后自动调用setAlarm
调用setAlarm时,将ms保存到本地存储(如果ms具有有效值)。
调用cancelAlarm时,清除本地存储。


这也许不是处理所有这些问题的最优雅的方法,但是我希望它至少可以使您朝正确的方向前进-不断迭代!

09-17 10:46
查看更多