ローカルストレージが消えてしまう

Question

前提・実現したいこと

todolistを作っています。
localstorageに配列として、データを保存しようとしているのですが、なぜか配列が消えてしまいます。
デベロッパーツールで確認すると、
タスクを追加したときはローカルストレージに追加されていきます。
リロードしたときもまだそのデータは残っています。
しかし、リロード後に新しくタスクを追加すると今までのローカルストレージの中身がなくなります。
これの原因は何なのでしょうか
どうしたらうまくいきますか

let plusa=document.getElementById("plus-a");

var datalocaltask = [];
var datalocalmark = [];

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>");
        
        
        datalocaltask.unshift(newTask);
        datalocalmark.unshift(lists.querySelector('p').innerText);
        localStorage.setItem('key',JSON.stringify(datalocaltask));
        localStorage.setItem('keys',JSON.stringify(datalocalmark));

localstorage.setItemが反応したときにローカルデータがリセットされています。

Comments

[m.ts10806]

コード外とはいえ、スペルは正しく書いてください
localStorage

[m.ts10806]

スペルミス残ってます。↓
localSorage

手動ではなくコピペしてくださいね。間違いないので

Answer 1

var datalocaltask = [];
var datalocalmark = [];

最初の読み込み処理がないので、ページをリロードした後は空配列からのスタートとなります。

Comments

[tokio-k]

あ、なるほど。そうですね
この定義の下で配列にローカルストレージの中身をプッシュしたらいいですか？