HTML5 でメモ帳作成
http://dotinstall.com/lessons/memo_html5/2301
を参考に、メモ帳を作成
最終的には自動保存機能を実装する
これはHTML５の機能
localStorage を使う
今回は jQuery を使うので
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
で読み込んでおく
あと、テキストエリアを使うので
textarea を使う
これについては
#11 テキストの入力
http://dotinstall.com/lessons/basic_html/311
が参考になる
rows は行数
つまり高さのようなもの
cols は横の文字数
つまり幅
canvas における
htight = row
width = cols
というかんじ
<textarea id=”memo” rows=”10″ cols=”40″ name=”memo”></textarea>
なら
縦１０行
横４０文字
ということになる
localStorage は制御は
java script で行う
保存には
localStorage.setItem()
読み出しには
localStorage.setItem()
セットした内容を一括削除するには
localStorage.clear()
指定して削除するなら
localStorage.remove()
ただし、ブラウザがHTML５のWeb Storage 対応でないと使えないので注意
実際に使う時には
ボタンクリックとかで保存することがおおい
なので、
$(‘#save’).click(function(){
localStorage.setItem(‘memo’,$(‘#memo’).val());
console.log(localStorage.getItem(‘memo’));
});
これで、実行して保存ボタンをおすと
develper tools で
console で確認すると
保存した文字が見える
developer tools の起動方法は
chrome で
Ctrl + Shift + i で起動
これができたら、ページ読み込んだらデータを表示する