jsカレンダー機能において日付のクリックでメモ欄の参照をするためのローカルストレージへの保存方法

Question

1. 【必須】現状、聞きたいこと

カレンダー機能において、メモの入力欄からメモを「保存する日の日付」、「目標達成の状況」、「一言メモ」などを保存し、日付のクリックによってメモ欄を参照できるようにしたいのですが、現在ローカルストレージにどのような形で保存すれば、日付のクリックをした際に判定できるものになるのかがわからない状態です。

聞きたいこととしては、下の二点になります。よろしくお願いします

1,どのような形でローカルストレージに保存すれば良いのか
2,保存した内容をクリックされた日付とどのように判定するのか

2. 【必須】起きている問題やエラーメッセージ

起きている問題としては、どのような形で保存し、どのようにその保存内容がその日のものなのかを判定すれば良いのか思いつかないというところです。

エラーメッセージ

3. 【必須】ご自身で試されたこと

ローカルストレージにセットする際にオブジェクト-オブジェクトの形にしたものの、メモされる数が不確定な数のためどのように繰り返しの指揮を組めば良いのかわからず終わってしまいました。

4. 関連するソースコードやスクリーンショット

<div id="noteZone" class="look">
          <span id="close">×</span>
          <h2 class="titleSmall">日付</h2>
          <form name="form1">
            <input type="date" id="date" name="date" />
          </form>
          <h2 class="titleSmall">目標</h2>
          <form name="form2">
            <input id="radio" class="radio" type="radio" name="achieve" value="達成できた"/>
            <span class="radioText">達成</span>
            <input id="radio" class="radio" type="radio" name="achieve" value="達成できていない"/>
            <span class="radioText">未達成</span><br>
          </form>
          <h2 class="titleSmall">メモ</h2>
          <form class="form3">
            <textarea id="textArea" class="note" name="memo" rows="6" cols="50"></textarea>
          </form>
          <div class="btnzone">
            <button id="keep" type="button">保存</button>
          </div>
        </div>

let dayClick = document.querySelectorAll('.dayClick');
let noteZone = document.getElementById('noteZone');
let makeBtn = document.getElementById('makeBtn');

//メモ表示用のテキストをクリックでメモを表示する
if(makeBtn != null) {
  makeBtn.addEventListener('click', ()=> {
    let result = noteZone.classList.contains('nolook');

    if(result === true) {
      noteZone.classList.remove('nolook');
    } else {
      noteZone.classList.add('nolook');
    }
  })
}

//------------------メモ内の動作-------------------------------------------------------------

let close = document.getElementById('close');

//バツマークをクリックでメモを閉じる
if(close != null) {
  close.addEventListener('click', ()=> {
    noteZone.classList.add('nolook');
  })
};

//入力欄のvalueを取得する
let keep = document.getElementById('keep');

let dataList = {};

//入力されたvalueを保存ボタンのkクリックでローカルストレージに保存する
if(keep != null) {
  keep.addEventListener('click', ()=> {
    keepData();
  })
};

function keepData() {

  let noteDate = document.getElementById('date').value;
  let textArea = document.getElementById('textArea').value;
  let radio = document.getElementsByName('achieve');
  let checkValue = '';

  for(let r = 0; r < radio.length; r++) {
    if(radio[r].checked) {
      checkValue = radio[r].value;
    }
  }

  //それぞれのデータの取得
  console.log(noteDate); //日付
  console.log(checkValue); //目標達成の有無
  console.log(textArea); //メモ欄の文字列

  dataList.key1 = {data1: noteDate, data2: checkValue, data3: textArea};

  console.log(dataList);

};

keepData();

5. 使用言語・ライブラリのバージョン

javascript,html,css

Answer 1

日付をキーにすればいいのではないかな、と思いました。