Pocket

こんにちは。itouです。

私の在籍するプロジェクトでは
まだ意識することはないのですが
利用分野が広がることが予想される
HTML5を触ってみました。

まずはサンプルをお試しください。
(HTML5へのブラウザの対応は段階的ですので、ブラウザによっては正しく表示されない場合があります。Google Chromeでは動作確認しております)

memo.html
を、クリックします。

・テキスト入力エリア
・テキスト参照エリア
とあります。

テキスト入力エリアに文字を入力すると…

自動保存しましたとメッセージが現れて
テキスト参照エリアに日付が表示されました。

日付をクリックすると、先ほど入力した値が表示されます。

このように
テキスト入力エリアに記載した内容を
定期的にバックアップ&表示してくれるアプリとなっております。

仮にブラウザが落ちてもデータは保持されているので
文章の下書きに便利です。

ここで使われているHTML5の技術を1つづつ紹介いたします。

■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>

次回は、引き続きもう一つの機能について
ご紹介したいと思います。