Как с помощью кнопки добавить на страницу элемент, что бы он не исчезал после обновления

Question

Хочу сделать так, что бы после нажатия на кнопку, введенная информация в input, выводилась списком на странице и оставалась при обновлении страницы, тд. Подскажете как сделать? Вот код html:

<body>
<div class="container">
    <h1>Experience calculator</h1>
    <div class="calc-body">
        <div class="calc-item">
            <p>Hero name</p>
            <input type="text" id="input-name">
        </div>
        <div class="calc-item">
            <p>Exp to next lvl</p>
            <input type="number" id="input-next">
        </div>
        <div class="calc-item">
            <p>Current exp</p>
            <input type="number" id="input-curr">
        </div>
    </div>
    <button class="calc-accept">Accept</button>
    <div class="results">
        <ol></ol>
    </div>
</div>

<script src="js/script.js"></script>

</body>

JS:

let inputName = document.querySelector('#input-name');
let inputExpToNext = document.querySelector('#input-next');
let inputCurrExp = document.querySelector('#input-curr');
let startButton = document.querySelector('.calc-accept');

const list = document.querySelector('ol');
list.innerHTML = '';

startButton.onclick = function () {
    let name = +inputName.value;
    let expToNext = +inputExpToNext.value;
    let currExp = +inputCurrExp.value;
    let li = document.createElement('li');
    li.innerHTML = `Hero: ${name} > Exp to next lvl: ${expToNext - currExp}`;
    list.append(li);
};

БЛОГ НА HUSL

Как с помощью кнопки добавить на страницу элемент, что бы он не исчезал после обновления

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