5分で把握するHTML5 - Google Developer Dayセッションリポート

Web Storage

Web Storageは、クライアント内にデータを永続化するための機構だ。大きく、以下の二つに分けられる。

Storage・・・キー/バリューの形式で永続化できる。キーと値はどちらも文字列である必要がある。localStorageはドメインごとに保存され、永続化期間は無制限だ。sessionStorageはウィンドウごと保存され、永続化期間はそのウィンドウを閉じるまでとなる
```
  // ローカルストレージに値を保存する
  window.localStorage.pageLoadCount = 0;
```
データベース・・・SQLを用いてアクセスする事の出来る永続化領域。非同期APIと同期APIの双方を用いてアクセスすることができる。非同期APIは扱いにくい分、データアクセスがバックグラウンドで行われるため、UI操作の妨げにならない
```
  // データベースに対して非同期でSQLを実行する
  var database = window.openDatabase();
  // 非同期APIは、コールバック関数を渡して結果を受け取る
  database.transaction(function(tx) {
    // SQLの実行
    tx.executeSql("insert into TEST values(?)", ["Hello"]);
  });
```

Web Workers

Web Workersは、バックグラウンドで動作するJavaScriptスレッドのこと。「重い」処理を行うJavaScriptコードも、ワーカで実行するようにすれば、UIをブロックする事なく処理を行える。

メインページのJavaScriptとワーカ、もしくはワーカ同士はJavaScriptオブジェクトを「メッセージ」として送受信することにより、ワーカ間の協調を実現する。

  [mainpage.js]

  // ワーカを作成
  var worker = new Worker('worker.js');
  // ワーカからメッセージを受け取ったら、DOMを更新する
  worker.onmessage = function (event) {
    document.getElementById('result').textContent = event.data;
  }

  [worker.js]

  // 5秒後にメインワーカに対して「Hello」という文字列を送信する。
  setTimeout(function() {
    postMessage("Hello");
  }, 5000);

また、複数のウィンドウ間で共有されるSharedWorkerという仕様もある。さらに、ブラウザのウィンドウを閉じても動作を続ける「Persistent Worker」という仕様についても議論が行われている。

Web Sockets

サーバサイドプロセスと双方向に通信する事を可能にする仕組みがWeb Socketsだ。サーバ側でもWebSocketsへの対処を必要とされるが、HTTPを用いずに効率的な双方向通信を実現可能なのが特徴。

  // WebSocketを作成
  var ws = new WebSocket("ws://example.org");

  // ソケットのオープンに成功した
  ws.onopen = function() {
    // サーバにメッセージを送信する
    ws.postMessage("Hello from client");
  };
  // サーバからメッセージを受け取った
  ws.onmessage = function(message) {
    alert("Message from server:" + message);
  };