localStorageでうまく保存できません。助けてください

localStorageの保存の仕方を教えてください

todoリストを作っています。

<div id="today" class="tab-pane active">
                    <p>今日やること</p>
                    <div class="task-wrapper">
                        <span style="white-space: nowrap;" class="add-task-wrapper">
                                <form id="form-a" class="add-task-wrappers">
                                    <input type="button" value="+" class="add-mark" id="plus-a">
                                    <input style="background-color:rgb(206, 214, 95)"placeholder="今日やることを追加してください" class="add-task" id="WantToAdda"  value="" >
                                </form>
                        </span>
                        <ul id="todolist-a" class="todolist">
                            <!-- todolistを追加 -->
                        </ul>
                    </div>
                </div>

let plusa=document.getElementById("plus-a");
plusa.addEventListener('click',function(){
    let newTask = document.getElementById("WantToAdda").value;
    let lists = document.getElementById("todolist-a");
    if(newTask!=""){
    lists.insertAdjacentHTML("afterbegin","<li><p>◉</p>"+newTask+"<i class='far fa-trash-alt gomi'></i></li>");

inputタグに入れた文字をtodolistとしてのなかに追加していきます。
<li><p>◉</p>*文字列(タスク)*<i class="far fa-trash-alt gomi"></i></li>
という形で追加していきます。

の◉もクリックでマークが変わるようになっています。
マークとタスクをセットで保存したいのですが、どのようにしたらいいのでしょうか？
削除機能もあるので、削除もできるようにします。ページを読み込みなおしたときに、タスクとマークがそのままになるようにしたいです。

配列にしてJSON.stringify()でlocalstorageに保存
localstorageから取り出して JSON.parse() で配列に戻してJavaScriptで追記・編集・削除などを行ってまた保存する際に JSON.stringify() の繰り返し。

と教えてもらったのですが、わかりません。どのタイミングで何をどのように保存するのでしょうか。