FC2ブログ

HTML5 でメモ帳作成 その2

HTML5 でメモ帳作成 その2

今回は
http://dotinstall.com/lessons/memo_html5/2304
を参考に、ページを読み込んだら
前回保存した内容を表示するというもの

これはメモ帳として最適な機能だと思う

追加された内容は
java script で
if で localStorage にデータ格納の有無を判定して
中身があるなら
getItem() で読み込んで表示するというもの

if(localStorage.getItem('memo'){
$('#memo').val(localStorage.getItem('memo'));
}

これにより。
id="memo"
となっているテキストエリアに、
前回保存した内容が読み込まれて表示される

jQuery で
val() は値を示す関数

これで、自動読み込みはできるので
内容の消去も実装

これは消去ボタンと紐付ける

$('#clear').click(function(){
$('#memo').val('');
localStorage.removeItem('memo');
});

これで、消去できる
$('#memo').val('');
で id="memo" のテキストエリアの内容を空で上書き
そして
localStorage.removeItem('memo');

localStorage の内容を削除

これで、再読込してもなにも表示されなくなる
スポンサーサイト



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

コメント

非公開コメント

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