１．本日の課題
今回はメモアプリを作る。最初は単純な仕組みから始めていき、途中からいろいろな要素を足していこうと思います。
まずはテキストボックス内に入力した文字を、ボタンを押したら表示できるようにするところから始めていきます。
<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>
function saveMemo() {
let writeMemo = document.getElementById('writeMemo');
let data = writeMemo.value;
let outputMemo = document.getElementById('outputMemo');
outputMemo.innerHTML += `<p>${data}</p>`;
}
</script>
</html>
このプログラムの流れを説明すると、
- テキスト入力枠のid
writeMemoを取ってくる - dataにwriteMemoのvalueを取得させる
- テキスト出力枠のid
outputMemoを取る - 出力枠のinnerHTMLにdataを表示する枠を追加させる
今度はlocalStrageを用いて、ページをリロードしてもデータが削除されないようなメモ帳を作ります。まずは1つだけを保存できるようにプログラムを組みました。
<html>
<head>
<title>メモ</title>
</head>
<body>
<input type="text" id="writeMemo" value="" />
<input type="button" value="save" onclick="saveMemo()" />
<input type="button" value="load" onclick="loadMemo()" />
<hr>
<div>
メモ記録領域
</div>
<p id="outputMemo"></p>
</body>
<script>
function saveMemo() {
let writeMemo = document.getElementById('writeMemo');
localStorage.setItem('writeMemo', writeMemo.value);
}
function loadMemo() {
let outputMemo = document.getElementById('outputMemo');
outputMemo.innerHTML += `<p>${localStorage.getItem('writeMemo')}</p>`;
}
</script>
</html>
ここではちゃんとlocalStrageにデータが保存されているのかを確認するためにsaveボタンとloadボタン(それぞれ保存と読み込み)を作りました。saveで入力欄に書いてある文字列を保存し、loadでその文字を出力することができます。ただし、saveは新しいものを保存しようとするとデータが上書きされてしまいます。
２．本日学んだこと
本日新たに学んだものはlocalStrage関数です。今回使った関数を簡単に説明します。
- localStorage.setItem('キーの名前', 保存するデータ);
- localStorage.getItem('キーの名前');
使い方としては、データを保存したいときにはsetItemを使用してキーの名前を設定し保存するデータを入力します。そして取り出すときはgetItemを使用し、取り出したいキーの名前を記入します。これが今回使ったlocalStrageの簡単な動作です。
今回はデータを一つまでしか保存できなかったので、次回は複数個のデータをlocalStrageに格納する方法とプログラムを投稿します。