如何使歷史日志存儲在電子表格中？

Question

我創建了一個簡單的計數器，它有一個文本框、禁用框和一個歷史記錄，用於記錄禁用框中的所有先前值。

它運行良好，但不知何故，當頁面意外刷新時，所有日志都被刪除。

即使頁面重新加載，有沒有辦法保留該記錄？ 或者將其存儲在電子表格中？

代碼 ：

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>

Answer 1

如果您正在談論將其存儲在瀏覽器中，而無需任何服務器代碼，您應該考慮來自 Web 存儲 API 的localStorage 。

要保存值：

localStorage.setItem(‘box2’, ‘value of box 2’);

要取回它：

const value = localStorage.getItem(‘box2’);

---

這是您的代碼的修改版本，它將歷史記錄保存到本地存儲並在它最初運行時預先填充它。

注意：由於安全限制，此代碼段中的本地存儲代碼不適用於 Stack Overflow，但希望您仍然可以看到它是如何工作的。

 (() => { let box1 = document.getElementById("box1"); let box2 = document.getElementById("box2"); let resetBtn = document.getElementById("reset"); let historyContainer = document.getElementById("history"); let history = []; try { // pre-populate the history from local storage. // NOTE: this WILL NOT WORK on stack overflow due to security restrictions. const historyContent = localStorage.getItem('historyContent'); historyContainer.innerHTML = historyContent; } catch (e) { console.log("can't load. can't access local storage:", e.message); } //listen key enter press on the input box1.addEventListener("keyup", e => { if (e.key === "Enter" && e.target.value !== "") { const summedValue = Number(box2.value.trim() || 0) + Number(e.target.value); box2.value = summedValue; historyContainer.innerHTML += `<p>${box2.value}</p>`; box1.value = ""; try { // save new markup to local storage: // NOTE: this WILL NOT WORK on stack overflow due to security restrictions localStorage.setItem('historyContent', historyContainer.innerHTML); } catch (e) { console.log("can't save. can't access local storage:", e.message); } } }); //reset the second box and resetBtn.addEventListener("click", () => { box2.value = ""; historyContainer.innerHTML = ""; // clear historyContent from localStorage localStorage.removeItem('historyContent'); // or clear all local storage localStorage.clear(); }); })();

 <div> <input type="number" id="box1" /> <input type="number" id="box2" disabled /> <div id="history"></div> <button type="button" id="reset">Reset</button> </div>

Answer 2

你可以使用storage api來實現你的想法，這里我以localStorage為例

存儲名為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;

    history.push(summedValue);

    // Store data
    localStorage.setItem("history", history);

    historyContainer.innerHTML += `<p>${box2.value}</p>`;
    box1.value = "";
  }
});

按下重置按鈕時刪除存儲陣列數據

//reset the second box and
resetBtn.addEventListener("click", () => {
  box2.value = "";
  historyContainer.innerHTML = "";
  // Remove data
  localStorage.removeItem('history');
});

頁面刷新后，讀取存儲位置。 如果不是undefined且長度大於0，則取出數據放到屏幕上

document.addEventListener("DOMContentLoaded", function() {
  // Get data
  const local_history = localStorage.getItem("history");
  if (typeof local_history !== "undefined" && local_history.length > 0) {
    let html_str = "";
    local_history.forEach(element => {
      html_str += `<p>${element}</p>`;
    });
    historyContainer.innerHTML = html_str;
  }
});