将更新保存到 localstorage 并具有以前输入的历史记录

Question

我有以下代码，我想做的是在每次单击按钮时保存选定的日期和时间，即使在刷新页面后也能记录以前的输入或会话，此外，每个会话都应该上限为 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>

Answer 1

您应该将历史记录存储在本地存储中的某个密钥中，并在刷新后使用该密钥访问它。也将点击次数存储在本地存储中，并在每次保存前进行检查。如果达到限制，则不存储。

  

    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>

将更新保存到 localstorage 并具有以前输入的历史记录

Saving updates into localstorage and having a history of previous inputs

javascript

html

session

local-storage