サンプルシステムの構成
図1は今回サンプルのシステム構成で、クライアント側では前回もそうでしたがHTMLのタグ記述をHTML5の書式で行い、サーバ側ではサーブレットとビーンズの構成でCloud SQLからRDBのMySQLにアクセスするようになっています。この構成でアプリケーションとしては仕訳入力を行うプログラムを作成していきますが、今回Cloud SQLと組み合わせて使用するWeb Storageについて最初に見ていきます。
Web Storage
HTML5ではHTMLのタグ仕様だけでなくJavaScriptから呼び出されるAPIの仕様も策定し、Webブラウザによる動作の差異をなくそうという方向性と、Webアプリケーションを作成する上でWebクライアントとして不足していた機能を補うAPIを補充・追加するという方向性が見られます。
このような趣旨・目的から策定されたAPIの一つがWeb Storageで、Webクライアントのローカルディスク上にデータを保存する機能です。従来はCookieがこれに近い機能として使用されていましたが、Web StorageはCookieに比べて「有効期限がない」「データサイズの制限がない」などの特徴があり、また保存できるデータ量も多くなっています。
1. Web Storageの仕様
Web Storageはデータを識別するための文字列をキーとし、任意のJavaScriptオブジェクトを値にとる単純なキー・バリュー型のストレージで、次の2種類のストレージタイプがあります。
localStorage（ローカルストレージ）
localStorageは、オリジン単位でデータを永続的に保存するストレージです。 ここでオリジンは、「http://www.at21.net:80」のような「プロトコル://ドメイン名:ポート番号」を意味しており、 オリジンが同じであれば別ウィンドウでもデータを共有でき、ブラウザを終了してもデータは失われません。 データ保存量の上限はブラウザへの推奨値が1オリジン当たり5MBとされており、 クッキーの4KBに比べるとはるかに大容量のデータを保存できます。
sessionStorage（セッションストレージ）
sessionStorageは、ウィンドウやタブ単位での一回限りのセッションで有効なストレージです。 ウィンドウやタブが開いている間のみデータが保存され、閉じるとデータが失われます。 同じドメインのサイトを別々のウィンドウやタブで開いている場合は、それぞれが別のsessionStorageとなります。 クッキーとは異なり、ウィンドウ間でデータが共有されることはありません。またWeb Storageでは、Cookieと異なり、任意のJavaScriptオブジェクトを保存（正確にはオブジェクトのコピー）することができます。
以上のスペックの違いを、クッキーを含めて比較すると表1のようになりますが、この中で最も使いでがあるのはlocalStorageで、このサンプルではlocajStorageを使用しています。
| 別ウィンドウでのデータ共有 | データの有効期限 | 保存容量 | セキュリティ | |
| クッキー | ○ | 指定期限まで有効で期限が過ぎると削除される | 4KB | すべてのリクエストに対してサーバにデータを自動送信 |
| sessionStorage | × | ウィンドウやタブを閉じるまで有効 | 1オリジン当たり5MB | データを利用する時のみ送信（自動で送信しない） |
| localStorage | ○ | 永続的に有効 | 1オリジン当たり5MB | データを利用する時のみ送信（自動で送信しない） |
2. Web SQL Database
Webクライアントのディスク上にデータを保存するストレージとしては、上記の他にWeb SQL Databaseがあり、今回は触れませんがこの後の連載で取り上げる予定です。
Web SQL Databaseは、簡単に言えばブラウザからアクセスされるローカルRDBで、実装部分はSQLiteがベースになっています。従来からのデータベース（RDB）の特長をそのまま受け継いでいるため、リレーショナル構造やトランザクションもサポートされます。
Web SQL DatabaseはHTML5の仕様から外れることがすでに正式決定されており、W3Cでメンテナンスされないことが公表されています。
