Как сохранить непрерывное добавление данных в локальное хранилище?

Question

Я реализовал «Панель задач» с HTML, CSS и JS. На странице у меня есть кнопка «Сохранить», которая при каждом нажатии - добавляет новую заметку на страницу.

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

Код (без реализации локального хранилища):

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

var mission =
 {     
    text: document.getElementById('textarea').value,
    date: document.getElementById('date').value,
    time: document.getElementById('time').value
 };// Saving the user inputs (tasks, times, dates) 

const rows = document.getElementById('rows');// saving reference to static div (here will be inserted the new note)
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>'; // the new note design

const [textarea, dateinput, timeinput] = cell.querySelectorAll('textarea, input'); 
textarea.value = mission.text;
dateinput.value = mission.date;
timeinput.value = mission.time;// inserting the user input inside the new note

rows.appendChild(cell); 

cell.querySelector('button').addEventListener('click', function(){ // removing specific note
rows.removeChild(cell);
});//end "remove" button listener.

Есть ли у кого-то представление о том, как спланировать локальное хранилище (как сохранить много контейнеров с заметками и удалить конкретный c наиболее эффективным способом?)