Самый эффективный способ управления данными в локальном хранилище веб-браузера

Question

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

1. Я сохраняю все контейнеры в массиве, а затем сохраняю в локальном хранилище.

2. Когда я удаляю контейнер - мне приходится искать во всем массиве - но - когда я удаляю контейнер, мне не нужно искать между всеми контейнерами. Может быть, есть способ передать ссылку, и когда контейнер будет удален, я смогу удалить его из локального хранилища без поиска во всем массиве?

Код:

**window.onload = (event) => {
if(localStorage.getItem('notes')){
JSON.parse(localStorage.getItem('notes')).forEach(element => {
createNote(element);
});;
}**

document.getElementById("save").addEventListener('click',function(){

var mission =
 {     
    text: document.getElementById('textarea').value,
    date: document.getElementById('date').value,
    time: document.getElementById('time').value
 };

  if(mission.text !== "" && mission.date !== ""){

    **if(!localStorage.getItem('notes')) {
      notesArray=[];
      notesArray.push(mission);
      localStorage.setItem('notes',JSON.stringify(notesArray));
    }
    else{
     var notes = JSON.parse(localStorage.getItem('notes'));
     notes.push(mission);
     localStorage.setItem('notes',JSON.stringify(notes));
    }
    createNote(mission);**
  }

  });// end "save" button listener. 

function createNote(mission){

const rows = document.getElementById('rows');
const cell = document.createElement('div'); 
const id = document.createAttribute('id');
id.value = "div-cell";
cell.setAttributeNode(id);
cell.innerHTML = '<button id="remove-button" type="button" class="btn btn-default" aria-label="Right 
Align"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button><textarea> 
</textarea><div><input><input></div>';

const [textarea, dateinput, timeinput] = cell.querySelectorAll('textarea, input'); 

textarea.value = mission.text;
dateinput.value = mission.date;
timeinput.value = mission.time;

rows.appendChild(cell);

**cell.querySelector('button').addEventListener('click', function(){
var array = JSON.parse(localStorage.getItem('notes'));
for(let i = 0; i < array.length; i++){
 if(mission.text == array[i].text && mission.date == array[i].date && mission.time == array[i].time)
 array.splice(i,1);

}
localStorage.setItem('notes',JSON.stringify(array));
rows.removeChild(cell);**
});

Я знаю, что это немного долго, поэтому я выделил важные части. Спасибо за помощников.