やっぱり。JavaScript！-保存しよ！

donguri

2019年11月19日 21:08

この本を参考に実際に書きながら試してみます。

まず、<body></body>内に保存に関係する、タイトル欄、記入欄、のHTMLを作っていきます。

コードの確認は"JS Bin"というサイトで確認しながらやっていきます。

こんな感じになります。

HTML,JS,console,output 4つの4カラムで分離され、見やすいです。それぞれのコードを書いて試してみます。

カレンダーの部分は以前作ったものを利用します。コメント欄、ボタンなどが作成されました。

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

JS Binではこんな感じなります。

コードと画面表示が並んで見やすくなっています。

カレンダーは、

を使い必要な機能を実装していきます。

必要な関数、まずは保存してある情報を呼び出します。なければ表示しません。

function presetDiary(dateStr){
let button = document.getElementById("button");
button.setAttribute("data-date", dateStr);
let diary_date = document.getElementById("diary_date");
diary_date.innerHTML = dateStr;
let title = localStorage[dateStr+"_title"];
let body = localStorage[dateStr+"_body"];
let diary_title = document.getElementById('diary_title');
let 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 = "";
}
}

次にデータの保存です。

localStorage[dateStr+"_title"] = diary_title;

で以下で取得したタイトルが保存されます。

var diary_title = document.getElementById('diary_title').value;

これを連続で保存して、リロードします。

function onSave(obj){
let dateStr = obj.getAttribute("data-date");
let diary_title = document.getElementById('diary_title').value;
let diary_body = document.getElementById('diary_body').value;
localStorage[dateStr+"_title"] = diary_title;
localStorage[dateStr+"_body"] = diary_body;
window.alert("日記を投稿しました");
location.reload();
}

1日から月末日までループの中でコードを書いていきます。

 for(let i=1; i <= lastDate.getDate(); i++){
　　　　//  ここに書いていきます。
}

カレンダーの特定の日をクリックしたらその日のメモが記入できるようにできる機能の追加。

 htmlStr +=  "<a onclick='presetDiary(\"" + dateStr + "\");'>" + cellStr + "</a></td>";

日記データがあれば日付の下にアンダーバーを表示します。

if(localStorage[dateStr+"_title"]) cellStr = "<u>" + cellStr + "</u>";

これでメモを書いて保存ボタンを押せば保存され、カレンダーの数字を押せばデータが呼び出せます。

これでブラウザのローカルストレージに保存できるようになりました。(Safariで検証)

スクリプトの全コードです。

<script>
   function presetDiary(dateStr){
     var button = document.getElementById("button");
     button.setAttribute("data-date", dateStr);
     var diary_date = document.getElementById("diary_date");
     diary_date.innerHTML = dateStr;
     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){
     let dateStr   = obj.getAttribute("data-date");
     let diary_title  = document.getElementById('diary_title').value;
     let diary_body   = document.getElementById('diary_body').value;
     localStorage[dateStr+"_title"] = diary_title;
     localStorage[dateStr+"_body"] = diary_body;
     window.alert("日記を投稿しました");
     location.reload();
   }

    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let today = date.getDate();
    let firstDate = new Date(year, month-1, 1);
    let lastDate = new Date(year, month, 0);
    let table_title = year+"年 "+month+"月";
    let captionHtml = "<caption>"+table_title+"</caption>";
    let weekdays = ["日", "月", "火", "水", "木", "金", "土"];
    let weekdaysStr = "<tr>";
    for ( let 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>";
    let htmlStr = "<tr>";
    let startWeekDay = firstDate.getDay();
    for ( let i=0; i < startWeekDay; i++){
       htmlStr += "<td>&nbsp;</td>";
    }
    for(let i=1; i <= lastDate.getDate(); i++){
        let date = new Date(year, month-1, i);
        let weekDay = date.getDay();
        let dateStr = year+"."+month+"."+i;
        let cellStr = date.getDate();
      
       if(localStorage[dateStr+"_title"]) cellStr = "<u>" + cellStr + "</u>";
      
        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>";

        if(weekDay == 6) htmlStr += "</tr>\n";
    }
    let lastDayWeek = lastDate.getDay();
    if (lastDayWeek != 6) {
      for ( let i=lastDayWeek+1; i <= 6; i++){
         htmlStr += "<td>&nbsp;</td>";
      }
      htmlStr += "</tr>";
    }
    document.getElementById("calendar").innerHTML = "<table>" + captionHtml + weekdaysStr + htmlStr + "</table>";

</script>

この記事が気に入ったらサポートをしてみませんか？