こんにちは。itouです。
私の在籍するプロジェクトでは
まだ意識することはないのですが
利用分野が広がることが予想される
HTML5を触ってみました。
まずはサンプルをお試しください。
(HTML5へのブラウザの対応は段階的ですので、ブラウザによっては正しく表示されない場合があります。Google Chromeでは動作確認しております)
memo.html
を、クリックします。
・テキスト入力エリア
・テキスト参照エリア
とあります。
テキスト入力エリアに文字を入力すると…
自動保存しましたとメッセージが現れて
テキスト参照エリアに日付が表示されました。
日付をクリックすると、先ほど入力した値が表示されます。
このように
テキスト入力エリアに記載した内容を
定期的にバックアップ＆表示してくれるアプリとなっております。
仮にブラウザが落ちてもデータは保持されているので
文章の下書きに便利です。
ここで使われているHTML5の技術を１つづつ紹介いたします。
■Web Storage
一つは「Web Storage」というデータ保存の仕組みです。
従来のCokkieと同様に、ローカルディスク上にデータを保存する機能です。
Cookieに比べ
・格納できる容量が多い
・扱いやすい（コーディングしやすい）
などのメリットがあります。
今回は、テキストエリア内の文字列を
Web Storageに保存する/読出するサンプルとなっています。保存
var storage = localStorage;
storage.setItem(key, value);
とすると
第一引数のキーで、第二引数の値がWeb Storageに保存されます。
Web Storageには「sessionStorage」と「localStorage」
というグローバル変数を使用してにアクセスできますが
今回、使用している「localStorage」では
ドメイン/ポート番号単位でデータを保持します。
ブラウザを落としてもデータは保持されたままです。読出
storage.getItem(key)
第一引数にキーを指定して読出できます。
戻り値が値となります。
■detailsタグ
日付をクリックすると詳細が表示される個所は
HTML5で追加されたdetailsタグを使用しています。
サマリーの文言を定義して
サマリー文言をクリックすると
詳細を見せるという使い方ができます。detailsタグ
<details>
<summary>
サマリーとなる文言
</summary>
詳細文言
</details>
次回は、引き続きもう一つの機能について
ご紹介したいと思います。
