Table 内容在刷新时消失

Question

我正在尝试制作一个金钱追踪器，但每次我刷新时它们都会消失。任何人都知道我如何使用本地存储让他们留下来？我试过使用本地存储，但我无法理解它，这让我很困惑。代码笔 - https://codepen.io/jordandevelops/pen/wvPWzxL

    const table = document.getElementById('contentTable'),
inputText = document.getElementById('inputText'),
inputPrice = document.getElementById('inputPrice'),
inputDate = document.getElementById('inputDate'),
form = document.getElementById('form');

form.addEventListener('submit', (e) => {
    e.preventDefault();
    addNewItem();
});

function addNewItem(){
    if(inputPrice.value == ''){
        alert('Error, please enter price of purchase.');
        return;
    }
    if(inputDate.value == ''){
        alert('Error, please enter date of purchase.');
        return;
    }
    let newTr = document.createElement('tr');
    let newTd1 = document.createElement('td');
    let newTd2 = document.createElement('td');
    let newTd3 = document.createElement('td');
    table.appendChild(newTr);
    newTr.appendChild(newTd1);
    newTr.appendChild(newTd2);
    newTr.appendChild(newTd3);
    newTr.classList.add('createdTr')
    newTd1.classList.add('tdName');
    newTd2.classList.add('tdPrice');
    newTd3.classList.add('tdDate');
    newTd1.innerText = inputText.value;
    newTd2.innerText = `$${inputPrice.value}`;
    newTd3.innerText = inputDate.value;
}

Answer 1

本地存储可以正常工作，但如果你想像这样存储数据，我建议使用 IndexedDB。

IndexedDB 在某些方面甚至比本地存储更复杂，但是有一个名为“Dexie”的很棒的库使它变得容易得多。你可以在这里看到它：https://dexie.org/

使用Dexie，您可以保存、恢复和查询您的数据。尝试和学习如何操作需要一些时间，但它将是您工具箱中的一个很好的工具。

Answer 2

在本地存储中，您以 JSON 格式存储数据结构（而不是包含数据的 HTML）。

存储数据：

function addNewItem(){
  //... check and validate the input like you do
  // grab the current local storage or create an empty container
  let theData = localStorage.get('theData') || "[]"; 
  theData = JSON.parse(theData); // get it into object format
  //add to it
  theData.push({text: inputText.value, price: inputPrice.value, date: inputDate.value});
  // store that back into local storage as a string
  localStorage.set('theData', JSON.stringify(theData));
  //... continue on with your code

要检索数据，请在页面加载时执行

document.addEventListener('DOMContentLoaded', () => {
  let theData = localStorage.get('theData') || "[]";
  JSON.parse(theData).forEach(d => {
     // ... this is where you take the existing local storage list and populate it into your HTML. 
     // You can leverage your existing addNewItem function but you'll need to update it to allow for sending input directly into it.
  })

Table 内容在刷新时消失

Table contents disappear on refresh

javascript

local-storage