HTML5 でメモ帳作成 その3
ようやく、自動保存の開始
今回は、一定時間ごとに保存するというもの
setTimeoutを使って自動保存
http://dotinstall.com/lessons/memo_html5/2306
を参考に作成
#15 タイマー処理の違い
http://dotinstall.com/lessons/basic_javascript_tips/2115
無名関数と即時関数で出来ること
http://dotinstall.com/lessons/basic_javascript_tips/2118
も参考にしたほうがわかりやすい
これを使うと、保存するボタンをおさなくてもよくなる
このため、UIから保存ボタンを削除して
かわりにオート保存機能を実装
function autoSave(){
localStorage.setItem(‘memo’,$(‘#memo’).val());
setTimeout(autoSave,1000);
}
となる
$(‘#memo’).val()
は
id=”memo” のテキストエリアの
val() つまり、内容
ということ
なので
localStorage.setItem(‘memo’,$(‘#memo’).val());
は
id=”memo” のテキストエリアの内容を
localStorage に保存するという意味になる
そして、その間隔を
setTimeout(autoSave,1000) で
1000 にしているので１秒ごと
に実行される
あと、即時関数を使ったほうが、書くときにも楽
関数を作成して
autoSave();
でもいいけど
(function autoSave(){
localStorage.setItem(‘memo’,$(‘#memo’).val());
setTimeout(autoSave,1000);
})();
というようにして即時関数にしたほうが書く手間が省ける
これにより、自動保存できるし
他の人がおなじURLへアクセスすればみれるので
共有掲示板のようなものも作れる