[JavaScript]localStorageに保存した内容が画面に表示されない

Question

前提・実現したいこと

JavaScriptのlocalStorage機能を使って日記アプリを作る演習を行っており、入力した内容をlocalStorageに保存するところまではうまくいったのですが、保存した日記の内容を画面に表示することができずに困っています。
日記アプリの概要ですが、ブラウザ上に当月のカレンダーを表示して日記を書きたい日付をクリックするとその日の日記を書き込むことができ、日記を書いた日付をクリックするとその日の日記が画面に表示されるというものです。

試したこと

初学者ゆえ、この問題に対してどのように調べればよいか分からず、「localStorage　保存されない」などと検索しても、似たような事案を解説したサイトが出てきませんでした。

補足情報（FW/ツールのバージョンなど）

デベロッパーツールを開いてApplicationのlocalStorageを調べてみると、入力内容の保存自体はできているようですが、キーがnull_body、null_titleとなっています。エラーも出ていません。ちなみにエディタはAtomを、ブラウザはgooglechromeを使っています。
以下が実際のコードです。

<script>
      //指定した日付の日記を表示
      function presetDiary(dateStr){
        //ボタンのdate属性にキーの日付部分を指定する
        var button = document.getElementById('button');
        button.setAttribute("data-diary", dateStr);
        //日記の日付を表示
        var diary_date = document.getElementById('diary_date');
        diary_date.innerHTML = dateStr;
        //localStorageから日記の本文とタイトルを取得
        var title = localStorage[dateStr + "_title"]
        var body = localStorage[dateStr + "_body"]
        //日記の入力欄を取得
        var diary_title = document.getElementById('diary_title');
        var diary_body = document.getElementById('diary_body');
        //日記のデータがあれば表示
        if(title){
          diary_title.value = title;
        }else {
          diary_title.value = "";
        }
        if(body){
          diary_body.value = body;
        }else {
          diary_body.value = "";
        }
      }
      //日記を保存
      function onSave(obj){
        //ボタンのdata-date属性から日付文字列を取得
        var dateStr = obj.getAttribute("data-date");
        //日記の入力欄から入力内容を取得
        var diary_title = document.getElementById('diary_title').value;
        var diary_body = document.getElementById('diary_body').value;
        //日記を保存
        localStorage[dateStr + "_title"] = diary_title;
        localStorage[dateStr + "_body"] = diary_body;
        //完了メッセージを表示
        window.alert("日記を投稿しました");
        //ページをリロード
        location.reload();
      }

      window.onload = function(){
        //本日の日付を取得
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        //当月１日の日付を取得
        var firstDate = new Date(year, month-1, 1);
        //翌月の０日を指定して当月の月末日を取得
        var lastDate = new Date(year, month, 0);
        //本日の日記のプリセット
        var todayStr = year + "." + month + "." + date;
        presetDiary(todayStr);
        //当月の表示
        var table_title = year + "年 "+ month + " 月";
        var captionHtml = "<caption>" + table_title + "</caption>"
        //曜日の行を作成
        var weekdays = ["日","月","火","水","木","金","土"];
        var weekdaysStr = "<tr>";
        for(var i=0; i<7; i++){
          if(i==0){
            weekdaysStr += "<td class='sun'>" + weekdays[i] + "</td>";
          }else if(i==6){
            weekdaysStr += "<td class='sat'>" + weekdays[i] + "</td>";
          }else{
            weekdaysStr += "<td>" + weekdays[i] + "</td>";
        }
      }
        weekdaysStr += "</tr>";

      //カレンダーの日付セル部分を作成
      var htmlStr = "<tr>";
      //当月１日の曜日
      var startWeekDay = firstDate.getDay();
      //１日までを空白で埋める
      for(var i=0; i<startWeekDay; i++){
        htmlStr += "<td>&nbsp;</td>"
      }
      //１日から月末日までループ
      for(var i=1; i <= lastDate.getDate(); i++){
        //当月i日のDateオブジェクトを生成
        var date = new Date(year, month-1, i);
        //i日の曜日を取得
        var weekDay = date.getDay();
        //日記を保存する際の日付部分のキー
        var dateStr = year + "." + month + "." + i;
        //日を取得
        var cellStr = date.getDate();
        //日記データがあれば日付の下に下線を表示
        if(localStorage[dateStr + "_title"]) cellStr = "<u>" + cellStr + "</u>";
        //日曜日の場合は行の開始なのでtr開始タグ
        if(weekDay == 0) htmlStr += "<tr>";
        if(weekDay == 0){
          htmlStr += "<td class = 'sun'>";
        }else if(weekDay == 6){
          htmlStr += "<td class = 'sat'>";
        }else{
          htmlStr += "<td>";
        }
        htmlStr += "<a onclick='presetDiary(\""+ dateStr +"\");'>" + cellStr + "</a></td>";
        //土曜日の場合は行の終わりなのでtr終了タグ
        if(weekDay == 6) htmlStr += "</tr>\n";
      }
      //月末日の曜日
      var lastDayWeek = lastDate.getDay();
      //月末日が土曜日でない場合、空白のセルでテーブルを埋める
      if(lastDayWeek != 6){
        //月末日の翌日の曜日から土曜日までをfor文で回す
        for(var i=lastDayWeek + 1; i<=6; i++){
          htmlStr += "<td>&nbsp;</td>";
        }
        htmlStr += "</tr>";
      }
      document.getElementById("calendar").innerHTML = "<table>" + captionHtml + weekdaysStr + htmlStr + "</table>";
  }
    </script>

こちらがHTMLのbodyタグです。

<body>
    <div class="frame-box">
      <div class="calendar-box">
        <div id="calendar" class="calendar"></div>
      </div>
      <div class="diary-box">
        <div id="diary_date" class="diary_date"></div>
      <input type="text" id="diary_title"><br><br>
        <textarea id="diary_body" rows="10" cols="80"></textarea><br><br>
        <input type="button" id="button" onclick="onSave(this)" value="保存">
      </div>
    </div>
  </body>

Answer 1

キーがnull_body、null_titleとなっています

という状況から推測すると、

        //日記を保存
        localStorage[dateStr + "_title"] = diary_title;
        localStorage[dateStr + "_body"] = diary_body;

で使われている変数 dateStr の内容が null なのだと思われます。

dateStrの値は、下記のコードで設定されています。
それが null になるのは、id="data-date" の要素が存在しないからではないでしょうか？

        //ボタンのdata-date属性から日付文字列を取得
        var dateStr = obj.getAttribute("data-date");

＝＝＝
どのようなHTMLファイルに質問のJavascriptのプログラムが書かれていたのかが判りませんので、具体的な回答をできかねます。

質問をするのであれば、必要な情報を提示するようにしてください。

Comments

[wada_RY]

ご回答ありがとうございます。
scriptタグだけに問題があると思い込んでbodyタグを省略していました。
今後質問する際は気を付けたいと思います。

Answer 2

localStorage の使い方を調べましょう。
Window.localStorage - Web API | MDN
保存にはsetItem、取得にはgetItemを使います。

あと直接は関係ないですがvarをやめてletやconstを使ったほうが良いですよ。

Comments

[wada_RY]

ご回答ありがとうございます。
書籍を使って勉強しており、setItemやgetItemのことも載ってはいたのですが、サンプルを見たところそれらを使っておらず「使わなくても書けるのかな？」と勝手に勘違いしておりました。
URLや変数についても丁寧に書いてくださり、ありがとうございます。

Answer 3

下記の「button.setAtrribute("data-diary",dateStr);」の部分の「"data-diary"」を「"data-date"」に書き換えると希望通りの捜査をしました。

<script>
      //指定した日付の日記を表示
      function presetDiary(dateStr){
        //ボタンのdate属性にキーの日付部分を指定する
        var button = document.getElementById('button');
        button.setAttribute("data-diary", dateStr);