How to add local storage to keep lists on browser refresh

Question

I am trying to do local storage for a to-do app and I am not sure how to do it, is it possible for someone to show me how to do it for this app?

Below I have the full code for the HTML and JS so that you can see what is happening and to assist with the code I have.

I made a code snippet so you can see how the app functions.

const STORAGE_KEY = "task-list-storage-key";

/************************************
 * creates objct of elements needed *
 ************************************/

const elements = {
  form: document.querySelector("#new-task-form"),
  input: document.querySelector("#new-task-input"),
  list: document.querySelector("#tasks"),
  cal: document.querySelector("#calendar")
}

/****************************
 * Generates an ID for task *
 ****************************/

const createId = () => `${Math.floor(Math.random() * 10000)}-${new Date().getTime()}`

/**********************************************
 * function that creates the HTML elements    *
 **********************************************/

const createTask = () => {
  const id = createId()
  const task = elements.input.value;
  const date = elements.cal.value;

  if (!task && !date) return alert("Please fill in task and select date");
  if (!task) return alert("Please fill in task");
  if (!date) return alert("Please select date");

  const tasks = document.createElement("div");

  tasks.innerHTML = `
    <button class = "sort">Sort</button>
    <div class="task" data-id = "${id}">
        <div class="content">
            <input type ="checkbox" class="tick">
            <input type ="text" class = "text" id = "text" value="${task}" readonly>
            <label class = "due-date" for ="text">${date}</label>
            <input type ="date" class = "date" id = "date">
        </div>

        <div class = "actions">
            <button class="edit" data-id="${id}">Edit</button>
            <button class="delete" data-id="${id}">Delete</button>
        </div>
    </div>
    `
  elements.list.appendChild(tasks)
  markOfdddueDate()

  return tasks
}

/********************************************
 * Marks due date as complete with checkbox *
 ********************************************/

function markOfdddueDate() {
  let allCheckboxes = document.querySelectorAll('.tick')

  allCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', (e) => {
      let parentElem = e.target.parentElement
      console.log(e.target.parentElement)
      if (e.target.checked) {
        parentElem.style.textDecoration = "line-through"
      } else {
        parentElem.style.textDecoration = "none"
      }
    });
  });

}

/**************************************************************
 * Event that listens for the edit,save and delete buttons    *
 **************************************************************/
elements.list.addEventListener('click', event => {
  const {
    target
  } = event;
  const {
    id
  } = target.dataset;
  const task = id ? document.querySelector(`[data-id="${id}"]`) : null;

  const type = {
    edit: event.target.classList.contains('edit'),
    delete: event.target.classList.contains('delete')
  }

  const isFromSaveLabel = target.innerText.toLowerCase() === 'save'

  //Checking to see if buttons are pressed//

  if (task && type.edit && isFromSaveLabel) {
    const text = task.querySelector('.text')
    target.innerText = 'Edit'
    text.setAttribute('readonly', "true")
    return
  };

  if (task && type.edit) {
    const text = task.querySelector('.text')
    target.innerText = 'save'
    text.removeAttribute('readonly')
    text.focus()
    return
  };

  if (task && type.delete) {
    const textlist = task.querySelector('.task')
    textlist.appendChild.remove()
    return
  }

});

/*******************************************************************
 * Submits the HTML elements to have the lists submited and created*
 *******************************************************************/

const submitHandler = (event) => {
  event.preventDefault();
  createTask();
}
elements.form.addEventListener("submit", submitHandler);


/*********************************
 * Storing tasks in local storage*
 *********************************/

function getStoredtask() {
  const storedkey = localStorage.getItem(STORAGE_KEY);
  if (storedkey) {
    task = JSON.parse(storedkey);
    createTask()
  }
}

function Storingtasks() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(createTask()))
}

getStoredtask()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To-do App</title>
  <script src="../js/tasklist.js" defer></script>
  <script src="../js/dateTime.js" defer></script>

  <link rel="stylesheet" href="css/stylesheet.css" />
</head>

<body>

  <header>

    <div class="header">
      <h1>To-Do List</h1>

      <div class="time">
        <div class="dateTime"></div>
        <div class="day"></div>
      </div>
    </div>
    <form id="new-task-form">
      <div class="add-task">
        <input type="text" name="new-task-input" id="new-task-input" placeholder="What do you have planned?" />
        <input type="date" id="calendar">
      </div>

      <input type="submit" id="new-task-submit" value="Add task" />
    </form>
  </header>

  <main>
    <section class="task-list">
      <h2>Tasks</h2>

      <div id="tasks">
        <!--<button class = "sort">Sort</button>
              <div class="task">
                      <div class="content">
                          <input 
                              type="text" 
                              class="text" 
                              value="A new task"
                              readonly>
                      </div>
                      <div class="actions">
                          <button class="edit">Edit</button>
                          <button class="delete">Delete</button>
                      </div>
                  </div>-->

      </div>
    </section>
  </main>


</body>

</html>