Сохранить новые ячейки с данными внутри Js

Question

Есть таблица, в которую заносятся данные. Данная таблица создает новую строку и ячейки, в которых эти данные хранятся. По нажатию на кнопку данные выводятся предварительно создав ячейки, но когда перезагружаю страницу они не загружаются. Помогите пожалуйста. В JS я новый и понятию не имею, как работать с local storage.

function saveTable() {
    var tr = document.getElementsByClassName('AllTogetherPiece');
    var td = document.getElementsByTagName('td');
                                
    localStorage.setItem('obj', JSON.stringify(tr));
    localStorage.setItem('obj1', JSON.stringify(td));
    }
            
function LoadTable() {
    var obj = localStorage.getItem('obj');
    var obj1 = localStorage.getItem('obj1');
                                
    console.log('obj: ', JSON.parse(obj));
    console.log('obj1: ', JSON.parse(obj1));
    }
      
function createTd() {
    var tr = document.createElement('tr');
    var td1 = tr.appendChild(document.createElement('td'));
    var td2 = tr.appendChild(document.createElement('td'));
    var td3 = tr.appendChild(document.createElement('td'));
    var birth = document.getElementById('date').value;
    var text = document.createTextNode(" год");
                                
    td1.innerText = document.getElementById('name').value;
    td2.innerText = new Date(birth).toLocaleDateString();
    td2.appendChild(text);
    td3.innerText = document.getElementById('age').value;
                                    
    td1.setAttribute('class', 'HumanName');
    td2.setAttribute('class', 'BirthDate');
    td3.setAttribute('class', 'HumanAge');
                                
    tr.setAttribute('class', 'AllTogetherPiece');
                                
    document.getElementById("TbodyAge").appendChild(tr);                            
    }

<body onload="LoadTable()">
    <table>
        <thead>
            <tr>
                <th width="582 px" >История расчетов:</th>
            </tr>
        </thead>
    </table>
    <table id="TableAge">
        <thead>
            <tr>
                <th width="200 px">Имя:
                <a href="javascript:sort(true, 'HumanName', 'TableAge');" >asc</a>
                <a href="javascript:sort(false, 'HumanName', 'TableAge');" >dec</a>
                </th>
                <th width="200 px">Дата рождения:
                <a href="javascript:sort(true, 'BirthDate', 'TableAge');" >asc</a>
                <a href="javascript:sort(false, 'BirthDate', 'TableAge');" >dec</a>
                </th>
                <th width="100 px">Возраст:
                <a href="javascript:sort(true, 'HumanAge', 'TableAge');" >asc</a>
                <a href="javascript:sort(false, 'HumanAge', 'TableAge');" >dec</a>
                </th>
            </tr>
        </thead>
        <tbody id="TbodyAge">
        </tbody>
    </table>

БЛОГ НА HUSL

Сохранить новые ячейки с данными внутри Js

Ответы (0 шт):