Saving updates into localstorage and having a history of previous inputs-CodePudding

I have the following code, and what I'm trying to do is save the chosen date and time with every button click to have a record of the previous inputs or sessions even after refreshing the page, additionally each session should be limited by 5 clicks tops.

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"  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>

CodePudding user response：

You should store history in some key in local storage and access it with that key once refresh. Store click counts in local storage too and checks it every time before saving it. If the limit is reached, don't store it.

  

    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"  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>