前回作成した内容ではブラウザをリロードしたらデータが全て消えてしまうので単語帳としての意味をなさない。なので今回は登録されたデータを保存してみよう。
データベースやファイルに保存するのが王道だが、今回はよりライトに使えるローカルストレージを使っていく。
ローカルストレージとは
ローカルストレージはブラウザにデータを保存しておく仕組みだ。なので同じブラウザを使わなければならないという縛りがあるがJSでのハンドリングがとても楽なため今回のようなちょっとした用途だったら十分実用になる。さっそく基本からやっていこう。
名前表示アプリの作成
いったん、単語帳アプリを置いておいて一つ簡単な作例をローカルストレージを体験しよう。以下のようにlocal.htmlを作成する。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ローカルストレージ</title>
</head>
<body>
<p id="msg">名前を入力</p>
<input type="text" id="name" placeholder="名前">
<button id="btn">保存</button>
<script>
const msg=document.getElementById('msg');
let userName=localStorage.getItem('userName');
if(userName !=null){
msg.textContent=userName+"さん、いらっしゃい";
}
document.getElementById('btn').addEventListener('click',()=>{
let userName=document.getElementById('name').value;
localStorage.setItem('userName',userName);
msg.textContent='登録しました！';
});
</script>
</body>
</html>実行してみよう。
名前を入れ保存を押す
登録されました！と表示される。リロードしてみよう。
名前が表示された！
これは同じブラウザを使っている限り、半年後にやっても同じように表示してくれる。
localStorageのポイント
上の記述では色々書いてあるのでわかりにくくなっているがキモとなるのは以下の部分だ。
localStorage.setItem('キー',値); //で登録
let item=localStorage.getItem('キー');//取得（なければnullが返る)おなじみと言っていいキー・バリューストアだ。
確認
どこに保存されているのか確認してみよう。Chromeの管理画面を開いてApplicationを開くとuserNameというキーで山田が登録されていることがわかる。
削除の方法
削除するのは簡単だ。スクリプトで行う場合は
localStorage.removeItem('キー')
で削除できる。もちろん、Chromeの管理画面からでも右クリックからclearすることができる。
単語帳アプリの完成
ローカルストレージの基本がわかったので単語帳アプリを完成させよう。以下のように修正する。
'use strict';
window.onload=function(){
const en=document.getElementById('en');
const ja=document.getElementById('ja');
const btn=document.getElementById('btn');
const total=document.getElementById('total');
const table=document.getElementById('table');
class Color{
constructor(en,ja){
this.en=en;
this.ja=ja
}
showInfo(){
return `<td>${this.en}</td><td>${this.ja}</td>`;
}
}
let colors=[];
const loadData=localStorage.getItem('colors');
if(loadData !=null){
let jsonArr=JSON.parse(loadData);
for(let i=0;i<jsonArr.length;i++){
let color=new Color(jsonArr[i].en,jsonArr[i].ja);
colors.push(color);
}
createTable();
}
btn.addEventListener('click',()=>{
let color=new Color(en.value,ja.value);
colors.push(color);
en.value='';
ja.value='';
createTable();
localStorage.setItem("colors",JSON.stringify(colors));
});
function createTable(){
table.innerHTML='<tr><th>単語</th><th>意味</th></tr>';
for(let i=0;i<colors.length;i++){
let tr=document.createElement('tr');
tr.innerHTML=colors[i].showInfo();
table.appendChild(tr);
total.textContent=`全${colors.length}件`;
}
}
createTable();
};
実行したときにローカルストレージを読みにいってデータがあればそれを元にリストを作成している。またデータが増えた際もその都度書き込んでいる。
JSON!?
今回はデータの読み書きにJSONを使っている。JSONを使うと複雑なオブジェクトも簡単に表記することができる。JSを使っていれば変換は簡単。(JSONがわからない人はこちらから)
JSON.strigify(data) //dataをjson形式に変換
JSON.parse(json文字列) //json文字列からjsで使えるデータに変換例えば今回だったらJSON.stringifyで生成されたjsonは以下だ。
[{en: "red", ja: "赤"}, {en: "green", ja: "緑"}, {en: "blue", ja: "青"}, {en: "brown", ja: "茶"}]
これをJSON.parseすればそのまま、プログラムで使えるようになるので今回だったらfor文で回して、一つ一つをオブジェクトとして取り出せば良いことがわかる。
完成！
以上で単語帳の完成だ。今回はローカルストレージを使ってデータを保存する方法を学んだ。
コメント