Как вывести содержимое localStorage на страницу в виде таблицы?

Question

[pasha_hp]

Здравствуйте, уважаемые форумчане. Я недавно начал изучать JS, так что прошу не бросать в меня тапками. Столкнулся с проблемой корректного вывода данных из localStorage. Прошу помощи в данном вопросе

const card = {
'apple': 3,
'grape': 2
};

Дана корзина cart. По нажатию кнопки добавляю ее содержимое в localStorage и запускаю функцию вывода данных из localStorage на страницу в виде таблицы. Проблема в том, что данные в таблице перезатираются последними значениями и вместо apple - 3, grape - 2 я получаю grape - 2, grape - 2. Если сделать td[i].textContent += key, по попадает лишнее. Помогите правильно вывести содержимое.
https://codepen.io/avramenkop/pen/XWWPBMZ

Comments

[Одиночка Айс]

а функции t1() - t9() у вас тоже есть?))

[pasha_hp]

Одиночка Айс, да, есть. какое отношение названии функции имеет к решению задачи?

[Одиночка Айс]

pasha_hp, вы сами то не путаетесь?)

Answer 1

[twobomb]

function t10() {
    for(let key in card) {      
        localStorage.setItem(key, parseInt(localStorage.getItem(key) ||  0) + parseInt(card[key]));
    }
    t11()
}
function t11() {
    let out = document.querySelector('.out-10');
    out.innerHTML = "";
    let table = document.createElement('table');
    out.append(table);
    for(var key in card) {
        tr = document.createElement('tr');
        table.append(tr);
        var td1 = document.createElement('td');
      td1.innerHTML = key;
        tr.append(td1);
       var td2 = document.createElement('td');
      td2.innerHTML = localStorage.getItem(key) ||  0;
        tr.append(td2);
      
    } 
}

Comments

[pasha_hp]

спасибо. ну я и в дебри полез. кучу каких-то циклов написал. Зачем?

[twobomb]

pasha_hp, Я так тоже сначала программировал, куча циклов и не понятно работающий код

[pasha_hp]

twobomb, как мне достичь просветления?

[twobomb]

pasha_hp, Просто пиши всякую херню, изучай новые фичи языка и другие языки,в тебе должен быть запал программировать. И тогда пройдут года, и ... у тебя будет меньше циклов в коде...