Создание приложения для ведения журнала.возникли проблемы с местным хранилищем

Question

Я пытаюсь создать приложение для ведения журнала, используя localalstorage для сохранения информации, помещаемой в текстовые области.Когда я нажимаю кнопку «Сохранить», она сохраняет информацию в правильных полях, но когда я перезагружаю страницу, во всех полях сохраняется информация из верхнего окна.Как мне написать этот код, чтобы он сохранил всю информацию в правильных полях, когда я перезагрузить страницу?

var output_morning=
document.querySelector('.morning');

var input_breakfast=
document.querySelector('.breakfast');

var output_afternoon=
document.querySelector('.afternoon');

var input_lunch=
document.querySelector('.lunch');

var save_button=
document.querySelector('.save-button');


save_button.addEventListener('click', updateJournal);

output_morning.textContent = localStorage.getItem('content');
input_breakfast.value = localStorage.getItem('content');
output_afternoon.textContent = localStorage.getItem('content');
input_lunch.value = localStorage.getItem('content');

function updateJournal(){
localStorage.setItem('content', input_breakfast.value, input_lunch.value);
output_morning.textContent=input_breakfast.value;

output_afternoon.textContent=input_lunch.value;
}

.morning {
	float: left;
	box-sizing: border-box;
	background: #f9f9f9;
	padding: .5rem;
	width: calc(50% - 1rem);
	height: 10rem;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	color: #202020;
}

.breakfast {
	float: left;
	box-sizing: border-box;
	margin-left: 2rem;
	padding: .5rem;
	width: calc(50% - 1rem);
	height: 10rem;
	border: 1px solid #505050;
	resize: none;
}
.afternoon {
	float: left;
	box-sizing: border-box;
	background: #ff7256;
	padding: .5rem;
	width: calc(50% - 1rem);
	height: 10rem;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	color: #202020;
}
.lunch {
	float: left;
	box-sizing: border-box;
	margin-left: 2rem;
	padding: .5rem;
	width: calc(50% - 1rem);
	height: 10rem;
	border: 1px solid #505050;
	resize: none;
}

<div class="morning"></div>
<textarea class="breakfast"></textarea>
<div class="afternoon"></div>
<textarea class="lunch"></textarea>
<button class="save-button">save</button>

Answer 1

Метод setItem принимает только два параметра, ключ и значение.

Вы можете вызвать метод setItem дважды, чтобы сохранить две разные пары значений ключа:

  localStorage.setItem('breakfast', input_breakfast.value);
  localStorage.setItem('lunch', input_lunch.value);

и получите сохраненные значения, такие как:

output_morning.textContent = localStorage.getItem('breakfast');
input_breakfast.value = localStorage.getItem('breakfast');
output_afternoon.textContent = localStorage.getItem('lunch');
input_lunch.value = localStorage.getItem('lunch');

Обновленная демонстрация вашего кода

В качестве альтернативы вы также можете сохранить объект JavaScript в localstorage