FC2ブログ

HTML5 でメモ帳作成

http://dotinstall.com/lessons/memo_html5/2301
を参考に、メモ帳を作成

最終的には自動保存機能を実装する
これはHTML5の機能
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>
なら
縦10行
横40文字
ということになる

localStorage は制御は
java script で行う

保存には
localStorage.setItem()

読み出しには
localStorage.setItem()

セットした内容を一括削除するには
localStorage.clear()

指定して削除するなら
localStorage.remove()

ただし、ブラウザがHTML5のWeb Storage 対応でないと使えないので注意

実際に使う時には
ボタンクリックとかで保存することがおおい

なので、
$('#save').click(function(){
localStorage.setItem('memo',$('#memo').val());
console.log(localStorage.getItem('memo'));
});

これで、実行して保存ボタンをおすと
develper tools で
console で確認すると
保存した文字が見える

developer tools の起動方法は
chrome で
Ctrl + Shift + i で起動

これができたら、ページ読み込んだらデータを表示する
スポンサーサイト



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

コメント

非公開コメント

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