１．本日の課題
本日は前回作ったメモアプリを、一つだけ保存できるものから複数を保存できるものに改良する。
まずは前回作ったプログラムのおさらい。
See the Pen Untitled by mizmizsan2 (@mizmizsan2) on CodePen.
このプログラムだと、saveを押すとデータは上書きされ、ページをリロードするとデータの履歴はすぐ消えてしまう。そこで保存したデータをlocalStrageにすべて保存し、履歴もページ上にすべて保存するプログラムを作る。
ちなみに今回はloadボタンを撤廃し"イベントリスナー"を使う。イベントリスナーの仕組みは後程。
<html>
<head>
<title>メモ</title>
</head>
<body>
<input type="text" id="writeMemo" value="" />
<input type="button" value="save" onclick="saveMemo()" />
<hr>
<div>
メモ記録領域
</div>
<p id="outputMemo"></p>
</body>
<script>
// localStorage.setItem("memoCount", 0);
function saveMemo() {
let writeMemo = document.getElementById('writeMemo');
let memoCount = localStorage.getItem("memoCount");
if (!memoCount)
memoCount = 0;
localStorage.setItem(`writeMemo${memoCount}`, writeMemo.value);
console.log(localStorage);
localStorage.setItem("memoCount", memoCount + 1);
outputMemo.innerHTML += `<p>${writeMemo.value}</p>`;
}
document.addEventListener('DOMContentLoaded', (event) => {
let outputMemo = document.getElementById('outputMemo');
let memoCount = localStorage.getItem("memoCount");
let count = 0;
while (count < memoCount) {
console.log(localStorage);
outputMemo.innerHTML += `<p>${localStorage.getItem(`writeMemo${count}`)}</p>`;
count++;
}
console.log(memoCount);
});
</script>
</html>
document.addEventListener('DOMContentLoaded', (event) =>は「HTMLが読み込まれてDOMが作成されたら動作する」という意味です。簡単に言えばページをリロードできたときに動作されます。
上のプログラムの流れを説明すると、
1.メモ内容がwriteMemo0のキーにに保存される。
2.localStrageからmemoCountの0を持ってきて、1を足す。
3.saveボタンを押す。
4.メモ内容がwriteMemo1のキーにに保存される。
という風に、キーの値が少しずつ変わり、それぞれにメモ内容が格納されるようになっている。しかしこのままではエラーでページのリロードが出来なくなってしまった。
原因はmemoCountの数字の増え方にあった。このままでは文字列として認識されているため、+1をし続けると0, 1, 11 ,111, 1111....というように桁が一つづつ追加されてしまっている。
See the Pen Memo by mizmizsan2 (@mizmizsan2) on CodePen.
上記の原因を修正するためにparseIntを使用した。使い方としては、
parseInt(値, 進数)という風にあらわす。
これらをlet memoCount = parseInt(localStorage.getItem("memoCount"),10);と表すことで10進数の数字として扱うことができ、このプログラムは正常に動いた。
２．本日学んだこと
localStrageを扱うときの注意点として「そのまま扱ってしまうと数式も文字列になってしまう」ということ。また、こういったエラーの原因を見つけ修正する際は、「数値が合っているか」「正しく取り出せているか」などを一つずつ見つけ出すことが重要になってくる。
- 数値を扱いたい際には「parseInt(値, 進数)」を活用する。
次回は日付と時間、削除ボタンを実装する。