Ajax JavaScriptフレームワークのYUI (Yahoo! User Interface Library) が、最新版の2.8.0でHTML5ライクなクライアントストレージに対応していました。

YUI 2.8.0における注目の新機能は次のとおり。

• HTML5スタイルのローカルセッションストレージを提供するクライアントストレージメタコンポーネントStorage Utility (Matt Sinder氏提供)の導入。HTML5ストレージ、Google Gears、Flash共有オブジェクトをサポート
• さまざまな用途に適用できるプログレスバーコンポーネント ProgressBar (Daniel Barreiro氏提供)の導入
• 接続マネージャにおけるクロスドメインサポートの実現
• イベントデリゲーションサポートの実現
• カルーセルウィジェットにギャラリーモードを追加
• チャートにおける複数軸表示のサポート

» Yahoo! UI最新版登場、クライアントストレージ | エンタープライズ | マイコミジャーナル

細かく見ると色々と便利な機能がついていますが、個人的にクライアントストレージが時代に沿っているというか、HTML5が注目されだしている昨今、非常にタイムリーで目を引きました。

とその前に、ざっとHTML5のおさらい（といっても理解が不十分だったのでこれを機に調べたのですがf^^;）。

HTML5 まとめ

HTML5の注目点は、新しいマークアップ（タグの整理）と新しいAPIの対応です。

■ 新しいマークアップ

• 検索インデックスされやすいように構造化

  より構造的な文を生成できるように<nav>や、<section>といったタグが追加されました。

• マルチメディア対応

  <audio>や<movie>といったマルチメディアタグにより、javascriptやFlashを使わなくても音声・動画の再生ができるようになりました。

• Flashのような自由な2D表現

  <canvas>タグで簡単にJava Appletのような豊かな2D表現ができるようになりました。

■ 新しいAPI

• ドラッグ＆ドロップ
• 戻るボタン
• O3D

  ブラウザのプラグインとして提供されているO3Dをjavascriptから制御できるようになります。例えばGoogle Earthがこれを使ってブラウザ上で3D表現を可能にしていまいす。

• Geolocation

  1，2カ月程前に話題になりましたが、Firefox3.5でGoogle Mapを開くと現在地を表示できます。これはGeolocation APIを使っていて、javascriptから位置情報にアクセスできるからこそできる機能です。モバイルのブラウザのエンジンとして標準化しだしているWebkitでも実装が進んでいて、モバイル分野でかなり使われそうなAPIです。

• Web Storage

  javascriptでクライアントにデータを保存することができるAPIです。このときデータベースのようにSQLを用いてデータを保存することもできるようです。こちらにサンプルコードが記載されています。

• Web Workers

  バックグラウンドでjavascriptを動かせるようになります。いわばjavascriptスレッドです。繊細なUI処理に影響させることなく、重い処理を裏で行うことができるようになります。

• Web Sockets

  サーバサイドプロセスと双方向に通信することを可能にするAPIです。

HTML5のより詳しい記述はこちらへ↓
» グーグルが賭けるHTML 5の未来 － ＠IT
» HTML 5 ― HTML 4 からの変更点 W3C 草案 (Working Draft)

YUI2.8.0 Storage Utility

さて、今回のYUI2.8.0のStorage Utilityですが、HTML5のWeb Storage (FireFox 3, Safari 4, IE 8以上必要) に対応しているだけでなく、HTML5未対応のブラウザのためにGoogle GearsやSWFファイル(Flash Player 9.0.115以上必要)を使って本機能を実装しています。もちろんセッションでの保存にも対応しています。

YUIのサンプルで動いているのを確認しました。ウィンドウを閉じても文章が保存されていて感動。
» Simple Storage Example — Saving In-Progress Text Entry

コードもstorageEngineオブジェクトを用意してゲッター/セッターで入れるだけというシンプルさ。色々な場面で使う機会が出てきそうです。

var storageEngine = YAHOO.util.StorageManager.get(
  YAHOO.util.StorageEngineGears.ENGINE_NAME,
  YAHOO.util.StorageManager.LOCATION_LOCAL,
  {
    order: [
      YAHOO.util.StorageEngineGears,
      YAHOO.util.StorageEngineSWF,
      YAHOO.util.StorageEngineHTML5
    ],
  force: false
}
);
～中略～
storageEngine.getItem("simple-storage-textentry");
storageEngine.setItem("simple-storage-textentry", YAHOO.util.Dom.get("textentry").value);

なお、容量としてHTML5は5～10MB、Google GearsはSQLiteを使用していて最大2GB、SWFは100KBまで利用できるようです。