如何在Javascript本地存储中使用html表单时间输入

How to use html form time input in Javascript local storage?

本文关键字：html 表单 输入 时间 存储 Javascript      更新时间：2023-09-26

我正在尝试在本地存储中输入时间，但到目前为止无法成功。

html部分的时间输入字段的形式:

<label for="time"><p>Start</p></label>
        <input type="time" id="time" name="time" min="09:00" max="17:00"/>
javascript: 

function getTime(){
    globalTime = document.getElementById("time").value;
    localStorage.setItem("timeData", globalTime);
}
function inputTime(){
    var newTime = localStorage.getItem("timeData");
    alert(newTime);
}

当我调用inputTime函数时，我得到空的警告框，这意味着我无法获得时间输入。如果您能告诉我是什么原因，我该如何解决，我将不胜感激。

使用.addEventListener()将input事件附加到#time元素。将click事件附加到<button>元素上，设置并获取localStorage的值

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <label for="time">
    <p>Start</p>
  </label>
  <input type="time" id="time" name="time" min="09:00" max="17:00" value=""/>
  <br />
  <br />
  <button id="setTime">
    Set time
  </button>
  <button id="test">
    Get time
  </button>
  <script>
    document.getElementById('time').addEventListener('input', getTime);
    document.getElementById('test').addEventListener('click', inputTime);
    document.getElementById('setTime').addEventListener('click', setTime)
    var globalTime;
    function getTime() {
      globalTime = document.getElementById("time").value;
      console.log(globalTime)
    }
    function setTime() {
      localStorage.setItem("timeData", globalTime);
    }
    function inputTime() {
      var newTime = localStorage.getItem("timeData");
      alert(newTime);
    }
  </script>
</body>
</html>

plnkr http://plnkr.co/edit/AzbVoqkGQwLXGlRV9CQd?p=preview

相关文章：