Как сделать так, чтобы журналы истории сохранялись в электронной таблице?

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

Вы можете использовать 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');
});

Когда страница обновляется, прочитайте место хранения. Если оно не определено и длина больше 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;
  }
});

Answer 2

Если вы говорите о сохранении его в браузере без какого-либо серверного кода, вам следует рассмотреть localStorage из API веб-хранилища.

Чтобы сохранить значение:

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

Чтобы вернуть его:

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

---

Вот модифицированная версия вашего кода, которая сохраняет историю в локальном хранилище и предварительно заполняет его при первоначальном запуске.

ПРИМЕЧАНИЕ. Код локального хранилища в этом фрагменте не работает при переполнении стека из-за ограничений безопасности, но, надеюсь, вы все равно увидите как это работает.

(() => {
  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>