FC2ブログ

HTML5 でメモ帳作成 その3

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 にしているので1秒ごと
に実行される

あと、即時関数を使ったほうが、書くときにも楽

関数を作成して
autoSave();
でもいいけど

(function autoSave(){
localStorage.setItem('memo',$('#memo').val());
setTimeout(autoSave,1000);
})();
というようにして即時関数にしたほうが書く手間が省ける

これにより、自動保存できるし
他の人がおなじURLへアクセスすればみれるので
共有掲示板のようなものも作れる
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック