Подскажите как правильно отрисовать DOM элементы.
У меня есть два блока. В одном блоке (левый) есть заголовок и кнопка "Добавить". Во втором блоке (правый) мне необходимо отрисовать эти заголовки по клику на кнопку "Добавить" в правом блоке.
<div class="left">
<p>Заголовок</p>
<button>Добавить</button>
</div>
<div class="right">
//отрисовать элементы заголовков левого блока по клику на кнопку "Добавить"
</div>
В js коде я создаю функуцию и вызываю эту функцию по клику на кнопке.
function addToContent(){
//в этой функции я создаю DOM элементы заголовка, которые будут отображаться при клике на кнопку "Добавить"
let elem = '<h2>' + id + '</h2>'; // просто наглядный пример
let rightBlock.innerHTML = elem;
}
let btnAdd = document.querySelector('button');
btnAdd.addEventListener('click', addToContent);
У меня при клике на кнопку все отображается в моем правом блоке, но когда я обнавлю страницу браузера, то все пропадает и только отображается когда опять кликну на кнопку ДОБАВИТЬ.
Как мне сделать, что бы данные добавленные при клике на кнопку отображались даже когда обновлю страницу? Искал информацию и толком ничего не нашел или не понимаю как это реализовать. Покажите наглядно примером если можно.
