Retrieve local storage value in Javscript

I am able to create list, edit list and delete list. I also created localstorage in the function, however when I press refresh in the browser the lists are gone( which means I couldn't retrieve the list). I want the list to stay even after i close the browser.

<!-- language: lang-js -->

window.addEventListener('load', () => {
const form = document.querySelector("#new-task-form");
const input = document.querySelector("#new-task-input");
const list_el = document.querySelector("#tasks");
form.addEventListener('submit', (e) => {
e.preventDefault();
const task = input.value;
const task_el = document.createElement('div');
task_el.classList.add('task');
const task_content_el = document.createElement('div');
task_content_el.classList.add('content');
task_el.appendChild(task_content_el);
const task_input_el = document.createElement('input');
task_input_el.classList.add('text');
task_input_el.type = 'text';
task_input_el.value = task;
task_input_el.setAttribute('readonly', 'readonly');
task_content_el.appendChild(task_input_el);
const task_actions_el = document.createElement('div');
task_actions_el.classList.add('actions');
localStorage.setItem('tasks', JSON.stringify(task))
const storedTask = JSON.parse(localStorage.getItem('tasks'));
const task_edit_el = document.createElement('button');
task_edit_el.classList.add('edit');
task_edit_el.innerText = 'Edit';
const task_delete_el = document.createElement('button');
task_delete_el.classList.add('delete');
task_delete_el.innerText = 'Delete';
task_actions_el.appendChild(task_edit_el);
task_actions_el.appendChild(task_delete_el);
task_el.appendChild(task_actions_el);
list_el.appendChild(task_el);
input.value = '';
task_edit_el.addEventListener('click', (e) => {
if (task_edit_el.innerText.toLowerCase() == "edit") {
task_edit_el.innerText = "Save";
task_input_el.removeAttribute("readonly");
task_input_el.focus();
} else {
task_edit_el.innerText = "Edit";
task_input_el.setAttribute("readonly", "readonly");
}
});
task_delete_el.addEventListener('click', (e) => {
list_el.removeChild(task_el);
});
});
});

<!-- language: lang-css -->

:root {
--dark: #374151;
--darker: #1F2937;
--darkest: #111827;
--grey: #6B7280;
--pink: #EC4899;
--purple: #8B5CF6;
--light: #EEE;
}
* {
margin: 0;
box-sizing: border-box;
font-family: "Fira sans", sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
color: #FFF;
background-color: var(--dark);
}
header {
padding: 2rem 1rem;
max-width: 800px;
width: 100%;
margin: 0 auto;
}
header h1 {
font-size: 2.5rem;
font-weight: 300;
color: var(--grey);
margin-bottom: 1rem;
}
#new-task-form {
display: flex;
;
}
input,
button {
appearance: none;
border: none;
outline: none;
background: none;
}
#new-task-input {
flex: 1 1 0%;
background-color: var(--darker);
padding: 1rem;
border-radius: 1rem;
margin-right: 1rem;
color: var(--light);
font-size: 1.25rem;
}
#new-task-input::placeholder {
color: var(--grey);
}
#new-task-submit {
color: var(--pink);
font-size: 1.25rem;
font-weight: 700;
background-image: linear-gradient(to right, var(--pink), var(--purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
cursor: pointer;
transition: 0.4s;
}
#new-task-submit:hover {
opacity: 0.8;
}
#new-task-submit:active {
opacity: 0.6;
}
main {
flex: 1 1 0%;
max-width: 800px;
width: 100%;
margin: 0 auto;
}
.task-list {
padding: 1rem;
}
.task-list h2 {
font-size: 1.5rem;
font-weight: 300;
color: var(--grey);
margin-bottom: 1rem;
}
#tasks .task {
display: flex;
justify-content: space-between;
background-color: var(--darkest);
padding: 1rem;
border-radius: 1rem;
margin-bottom: 1rem;
}
.task .content {
flex: 1 1 0%;
}
.task .content .text {
color: var(--light);
font-size: 1.125rem;
width: 100%;
display: block;
transition: 0.4s;
}
.task .content .text:not(:read-only) {
color: var(--pink);
}
.task .actions {
display: flex;
margin: 0 -0.5rem;
}
.task .actions button {
cursor: pointer;
margin: 0 0.5rem;
font-size: 1.125rem;
font-weight: 700;
text-transform: uppercase;
transition: 0.4s;
}
.task .actions button:hover {
opacity: 0.8;
}
.task .actions button:active {
opacity: 0.6;
}
.task .actions .edit {
background-image: linear-gradient(to right, var(--pink), var(--purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.task .actions .delete {
color: crimson;
}

<!-- language: lang-html -->

<header>
<h1>Task List 2021</h1>
<form id="new-task-form">
<input type="text" name="new-task-input" id="new-task-input" placeholder="What do you have planned?" />
<input type="submit" id="new-task-submit" value="Add task" />
</form>
</header>
<main>
<section class="task-list">
<h2>Tasks</h2>
<div id="tasks">
</div>
</section>
</main>

<!-- end snippet -->

You can retrieve local storage items using localStorage.getItem('yourKey') and store them using localStorage.setItem('yourKey', youValue)

const value = 'my_test_value';
const key = 'my_key';
localStorage.setItem(key, value ); // set value in local storage
console.log(localStorage.getItem(key));  // get value in local storage

You get the storedTasks in the wrong place and do not actually use them
You likely want this

I did not test it since I cannot here at SO, but the idea is correct

<!-- language: lang-js -->

const tasks = JSON.parse(localStorage.getItem('tasks') || '[]'); // get the tasks or create an empty array
const saveList = () =>     localStorage.setItem('tasks', JSON.stringify(tasks));
window.addEventListener('load', () => {
const form = document.querySelector("#new-task-form");
const input = document.querySelector("#new-task-input");
const list_el = document.querySelector("#tasks");
form.addEventListener('submit', (e) => {
e.preventDefault();
const task = input.value;
const task_el = document.createElement('div');
task_el.classList.add('task');
const task_content_el = document.createElement('div');
task_content_el.classList.add('content');
task_el.appendChild(task_content_el);
const task_input_el = document.createElement('input');
task_input_el.classList.add('text');
task_input_el.type = 'text';
task_input_el.value = task;
task_input_el.setAttribute('readonly', 'readonly');
task_content_el.appendChild(task_input_el);
const task_actions_el = document.createElement('div');
task_actions_el.classList.add('actions');
tasks.push(task);
saveList();
const task_edit_el = document.createElement('button');
task_edit_el.classList.add('edit');
task_edit_el.innerText = 'Edit';
const task_delete_el = document.createElement('button');
task_delete_el.classList.add('delete');
task_delete_el.innerText = 'Delete';
task_actions_el.appendChild(task_edit_el);
task_actions_el.appendChild(task_delete_el);
task_el.appendChild(task_actions_el);
list_el.appendChild(task_el);
input.value = '';
});
list_el.addEventListener('click', (e) => {
const tgt = e.target;
const task_el = tgt.closest(".task")
const task_input_el = task_el.querySelector(".text");
if (tgt.matches(".edit")) {
if (tgt.innerText === "Edit") {
tgt.innerText = "Save";
task_input_el.removeAttribute("readonly");
task_input_el.focus();
} else {
tgt.innerText = "Edit";
task_input_el.setAttribute("readonly", "readonly");
}
} else if (tgt.matches("delete")) {
list_el.removeChild(task_el);
tasks = tasks.filter(task => task != task_el.value);
saveList();
}
});
});

<!-- end snippet -->

Something that you seem to miss is, only saving to localStorage doesn't guarantee that you are gonna get it back on refresh, but you should have to manually fetch and populate you html from your localStorage, on page load.

Simply paste this code into you main.js, it should work fine.
I have added a lot of comments and i think they are helpful.

//pre populating yout html on page loading
function populateStoredTasks(storedTasks) {
//taking the parent item
const list_el = document.querySelector("#tasks");
//Map over your stored tasks array and populate your #tasks field
storedTasks.forEach(function (task) {
// Much code duplication here but you can fix it once you get the 					idea    
const task_el = document.createElement('div');
task_el.classList.add('task');
const task_content_el = document.createElement('div');
task_content_el.classList.add('content');
task_el.appendChild(task_content_el);
const task_input_el = document.createElement('input');
task_input_el.classList.add('text');
task_input_el.type = 'text';
task_input_el.value = storedTasks[0];
task_input_el.setAttribute('readonly', 'readonly');
task_content_el.appendChild(task_input_el);
const task_actions_el = document.createElement('div');
task_actions_el.classList.add('actions');
const task_edit_el = document.createElement('button');
task_edit_el.classList.add('edit');
task_edit_el.innerText = 'Edit';
const task_delete_el = document.createElement('button');
task_delete_el.classList.add('delete');
task_delete_el.innerText = 'Delete';
task_actions_el.appendChild(task_edit_el);
task_actions_el.appendChild(task_delete_el);
task_edit_el.addEventListener('click', (e) => {
if (task_edit_el.innerText.toLowerCase() == "edit") {
task_edit_el.innerText = "Save";
task_input_el.removeAttribute("readonly");
task_input_el.focus();
} else {
task_edit_el.innerText = "Edit";
task_input_el.setAttribute("readonly", "readonly");
}
});
task_delete_el.addEventListener('click', (e) => {
list_el.removeChild(task_el);
});
task_el.appendChild(task_actions_el);
list_el.appendChild(task_el);
});	
}
window.addEventListener('load', () => {
const form = document.querySelector("#new-task-form");
const input = document.querySelector("#new-task-input");
const list_el = document.querySelector("#tasks");
//fetching your storedTaks makes sense here 
// also check if you local storage has 'tasks' item
const storedTasks = localStorage.getItem('tasks') ?  JSON.parse(localStorage.getItem('tasks')) : null;
// call function to populate your html
if(localStorage.getItem('tasks')) {
populateStoredTasks(storedTasks);
}
form.addEventListener('submit', (e) => {
e.preventDefault();
const task = input.value;
const task_el = document.createElement('div');
task_el.classList.add('task');
const task_content_el = document.createElement('div');
task_content_el.classList.add('content');
task_el.appendChild(task_content_el);
const task_input_el = document.createElement('input');
task_input_el.classList.add('text');
task_input_el.type = 'text';
task_input_el.value = task;
task_input_el.setAttribute('readonly', 'readonly');
task_content_el.appendChild(task_input_el);
const task_actions_el = document.createElement('div');
task_actions_el.classList.add('actions');
//tasks should be stored in an array in your local storage 
//check if your tasks in localStorage is empty
if(storedTasks) {
localStorage.setItem('tasks', JSON.stringify([...storedTasks, task]))
} else {
localStorage.setItem('tasks', JSON.stringify([task]))
}
const task_edit_el = document.createElement('button');
task_edit_el.classList.add('edit');
task_edit_el.innerText = 'Edit';
const task_delete_el = document.createElement('button');
task_delete_el.classList.add('delete');
task_delete_el.innerText = 'Delete';
task_actions_el.appendChild(task_edit_el);
task_actions_el.appendChild(task_delete_el);
task_el.appendChild(task_actions_el);
list_el.appendChild(task_el);
input.value = '';
task_edit_el.addEventListener('click', (e) => {
if (task_edit_el.innerText.toLowerCase() == "edit") {
task_edit_el.innerText = "Save";
task_input_el.removeAttribute("readonly");
task_input_el.focus();
} else {
task_edit_el.innerText = "Edit";
task_input_el.setAttribute("readonly", "readonly");
}
});
task_delete_el.addEventListener('click', (e) => {
list_el.removeChild(task_el);
});
});
});