Creating a journaling app. having an issue with localstorage

Question

I am trying to create a journaling app using localstorage to save the information put into the textareas. When i press the save button it saves the information in the correct boxes but when i reload the page all the boxes have the information from the top box saved in them. how do i write this code so it saves all the information in the correct boxes when i reload the page?

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>

LocalStorage only stores key/value pairs. It seems that you're trying to store several values with one key. You might consider storing each value with its own key, storing a JSON value, or storing a serializing an array. See [How to create a multiple values for a single key using local storage](https://stackoverflow.com/questions/24544861/how-to-create-a-multiple-values-for-a-single-key-using-local-storage). — showdev, Mar 01 '19 at 04:07

Awad Maharoof · Accepted Answer · 2019-03-01T04:15:02.687

The setItem method takes in only two parameters, the key and the value.

You could call the setItem method twice in order to save two different key value pairs:

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

and retrieve the saved values like:

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

An updated demo of your code

As an alternative, you can also save a JavaScript object in localstorage

Creating a journaling app. having an issue with localstorage

1 Answers1