Table contents disappear on refresh

Question

I'm trying to make a money tracker but every time I refresh they disappear. Anyone know how I can use local storage to make them stay? I've tried using local storage but I can't wrap my head around it and it is very confusing for me. Code Pen - 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

Local storage can work ok, but I'd recommend using IndexedDB if you want to store data like this.

IndexedDB is even more complicated than local storage in some ways, but there's a great library called "Dexie" that makes it a lot easier. You can see it here: https://dexie.org/

Using Dexie, you can save, restore and query your data. It will take a little time to experiment with and learn how to do, but it will be a great tool to have in your toolbox.