javascript - History log won't get deleted when page is refreshed OR history log will stored it's value in spreadsheet

Question

I've created a simple counter which has a single textbox, disabled box and a history to record all previous value in the disabled box.

It works perfectly, but somehow when the page is accidentally refreshed all the logs are deleted.

Is there a way to keeo that record even if the page reload? Or maybe store it in a spreadsheet?

let box1 = document.getElementById("box1");
let box2 = document.getElementById("box2");
let resetBtn = document.getElementById("reset");
let historyContainer = document.getElementById("history");
let history = [];

//listen key enter press on the input
box1.addEventListener("keyup", e => {
  if (e.key === "Enter" && e.target.value !== "") {
  const summedValue = (box2.value && box2.value.trim() === "")  ? Number(box2.value) : Number(box2.value) + Number(e.target.value)
  box2.value = summedValue;
  historyContainer.innerHTML += `<p>${box2.value}</p>`;
  box1.value = "";
  }
});
//reset the second box and
resetBtn.addEventListener("click", () => {
  box2.value = "";
  historyContainer.innerHTML = ""
});
<input type="number" id="box1" />
<input type="number" id="box2" disabled />
<div id="history">
</div>

<button type="button" id="reset">
Reset
</button>

标签： javascripthtmlcssiframe

Answer 1

您可以从 Web 浏览器的本地存储中存储和检索这些数据。了解更多