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 の内容を削除
これで、再読込してもなにも表示されなくなる

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です