Как сделать функцию которая сохраняет данные формы а затем выводит его на экран?

Question

dexr0w @dexr0w

Как сделать функцию которая сохраняет данные формы а затем выводит его на экран?

Нужна помощь срочно!

В общем есть некая форма, где пользователь выбирает из тега Select[option], некие данные,
Затем дальше в ''TextArea'' он пишет любую информацию.
И нажимает на кнопку Button, которая выводит информацию которую ввел и выбрал пользователь на Новый Блок на сайте экрана

Вопрос:

Надо сделать так чтобы при нажатии на кнопку "Добавить",
данные которые ввел пользователь сохранились,
после чего форма обновилась бы и пользователь смог снова ввести форму но уже другую.
После когда пользователь уже нажимал на "Показать расписание", должны вывестись те данные(формы) которые пользователь ввел до этого. Уже в нескольких контейнерах на сайте

КОД:

<div class="container custom__container__header">
                	<div class="row justify-content-center">
                		<form>
                		 <div class="col-4">
                		 	<h1 class="white_h1">Расписание</h1>
    					  <span class="white_span">День недели: </span><select name="" id="day">
    						<option>Понедельник</option>
    						<option>Вторник</option>
    						<option>Среда</option>
    						<option>Четверг</option>
    						<option>Пятница</option>
    					</select>
                		 </div>
                		 <div class="col-4">
                		 	 <span class="white_span">Время: </span><select name="select" id="time">
    						<option>09:00</option>
    						<option>10:00</option>
    						<option>11:00</option>
    						<option>12:00</option>
    						<option>13:00</option>
    						<option>14:00</option>
    						<option>15:00</option>
    						<option>16:00</option>
    					</select>
                		 </div>
                		<div class="col-4">
                		 <span class="white_span">Приоритет</span><select name="" id="priory">
    						<option>не важный</option>
    						<option>важный</option>
    						<option>очень важный</option>
    					</select>
                		 </div>
                		 <div class="col-4">
                		 	<textarea placeholder="Напишите название урока....."  cols="42" rows="6" id="textArea"></textarea> 
                		 </div>
                		</form>
                		<div class="col">
                		        <button class="blue__btn" id="addInfo">Добавить</button>
    					<button class="green__btn" id="getInfo">Показать расписание</button>
    				</div>
                	</div>
                       <div class="col">
                              <div id="response"></div>
                        </div>
                   
                </div>

const getInfo = document.getElementById('getInfo');

getInfo.addEventListener('click', function() {
  const day = document.getElementById('day');
  const time = document.getElementById('time');
  const priory = document.getElementById('priory')
  const textArea = document.getElementById('textArea');
 document.getElementById('response').textContent = ("Расписание на: " + day.value + ' Время:   ' +time.value+ ' Приоритет:  ' +priory.value + ' Предмет: ' + textArea.value)
});

.blue__btn { 
  width: 100px;
  height: 45px;
  background: #157dec;
  color: #fff;
  border: none;
  cursor: pointer;
}



.green__btn {
  width: 200px;
  height: 45px;
  background: #03ac13;
  color: #fff;
  border: none;
  cursor: pointer;
}

.white_h1 {
  color: #fff;
}

.white_span {
  color: #fff;
}