將更新保存到本地存盤中并具有以前輸入的歷史記錄-有解無憂

我有以下代碼，我想要做的是保存選擇的日期和時間，每次按鈕單擊以記錄以前的輸入或會話，即使在重繪頁面后，另外每個會話應限制為 5 次單擊最高額。

function store()  {
    
    var time = document.querySelector("option").innerText;
    var date = document.querySelector("input").value;

    localStorage.setItem(JSON.stringify(time), date);
    console.log(localStorage);

    //store in object
    const items = { ...localStorage};
    console.log(Object.entries(items))
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Performax Cinema</title>
</head>

<body>
    <input type="date" id="date" required/>
    
    <select id="time" class="form-control" required>
        <option value="0">10:00 AM - 12:00 PM</option>
        <option value="1">12:00 AM - 14:00 PM</option>
        <option value="2">14:00 AM - 16:00 PM</option>
        <option value="3">16:00 AM - 18:00 PM</option>
        <option value="4">18:00 AM - 20:00 PM</option>
        <option value="5">20:00 AM - 22:00 PM</option>
    </select>
    <button id="btn" onclick="store()">add</button>
    <script src="main.js"></script>
</body>

</html>

uj5u.com熱心網友回復：

您應該將歷史記錄存盤在本地存盤中的某個鍵中，并在重繪后使用該鍵訪問它。也將點擊計數存盤在本地存盤中，并在每次保存之前檢查它。如果達到限制，請不要存盤它。

  

    function store() {
  let clickCounter = localStorage.getItem("clickCount");
  if (!clickCounter) {
    localStorage.setItem("clickCount", 0);
    clickCounter = "0";
  }
  clickCounter = parseInt(clickCounter);
  if (clickCounter == 5) {
    console.log("Limit reached");
    return;
  } else {
    localStorage.setItem("clickCount", clickCounter   1);
  }
  console.log("Saving");
  var time = document.querySelector("option").innerText;
  var date = document.querySelector("input").value;

  localStorage.setItem(JSON.stringify(time), date);

  console.log(localStorage);
  if (!localStorage.getItem("history")) {
    localStorage.setItem("history", "[]");
  }
  //store in object
  const history = JSON.parse(localStorage.getItem("history"));
  history.push({ [JSON.stringify(time)]: date });
  localStorage.setItem("history", JSON.stringify(history));
  console.log(localStorage.getItem("history"));
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Performax Cinema</title>
</head>

<body>
  <input type="date" id="date" required />

  <select id="time" class="form-control" required>
    <option value="0">10:00 AM - 12:00 PM</option>
    <option value="1">12:00 AM - 14:00 PM</option>
    <option value="2">14:00 AM - 16:00 PM</option>
    <option value="3">16:00 AM - 18:00 PM</option>
    <option value="4">18:00 AM - 20:00 PM</option>
    <option value="5">20:00 AM - 22:00 PM</option>
  </select>
  <button id="btn" onclick="store()">add</button>
  <script src="main.js"></script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/458991.html

標籤：javascript html 会议本地存储

上一篇：在wordpress中創建帖子后將帖子ID保存到會話變數中

下一篇：如果單詞存在于兩列之一中，則查詢