JavaScriptで Web Storageを使う

HTML5 では、サーバではなくローカルドライブにデータを保存する Web Storage という仕組みが加わった。Cookieとは異なり、ブラウザを終了してもデータを保持し続けられる。

ダウンロード（HTML 5用）

生まれた月を4倍し、それに9を足し、さらに25倍し、それに生まれた日を足した結果を教えてもらうと、誕生月と日を言い当てられるという数字遊びがある。
実際のゲームは暗算で行うのだが、この計算の仕組みをJavaScriptでプログラミングしてみた。

保存 ボタンを押下すると、誕生月と日をローカルドライブに保存する。ブラウザを終了してもデータは消えず、このページを再度表示すると、保存した値が読み込まれるという仕組みである。

生まれた月
生まれた日
生まれた月を4倍すると
それに9を足すと
それを25倍すると
それに生まれた日を足すと		←相手から聞く数字
それから225を引くと		←答え

保存 ボタンを押下して呼び出されるのがユーザー関数 saveItem である。
getElementById メソッドを使い、FORMに入っている月と日を取得する。
HTML 5の localStorage に対応していれば、プロパティ localStorage が真となる。これを利用し、setItem メソッドを使って、 localStorage にデータを保存する。
setItem メソッドの第1引数はキー情報（変数名）、第2引数は値である。

一方、ロード時に実行する関数で、getItem メソッドを使い、localStorage に保存したデータを取り出す。

  11: <script type="text/javascript">
  12: <!--
  13: //localStorageから呼び出し
  14: window.onload = function() {
  15:     var month = '';
  16:     var day   = '';
  17:     if (localStorage) {
  18:         month = localStorage.getItem("birthgame_month");
  19:         day   = localStorage.getItem("birthgame_day");
  20:     }
  21:     document.getElementById('month').value = month;
  22:     document.getElementById('day').value   = day;
  23: }
  24: 
  25: //計算
  26: function calc() {
  27:     var month = parseInt(document.getElementById('month').value);
  28:     var day   = parseInt(document.getElementById('day').value);
  29:     var n1 = month * 4;
  30:     var n2 = n1 + 9;
  31:     var n3 = n2 * 25;
  32:     var n4 = n3 + day;
  33:     var n5 = n4 - 225;
  34:     document.getElementById('n1').value = n1;
  35:     document.getElementById('n2').value = n2;
  36:     document.getElementById('n3').value = n3;
  37:     document.getElementById('n4').value = n4;
  38:     document.getElementById('n5').value = n5;
  39: }
  40: 
  41: //localStorageに保存
  42: function saveItem() {
  43:     var month = document.getElementById('month').value;
  44:     var day   = document.getElementById('day').value;
  45:     if (localStorage) {
  46:         localStorage.setItem("birthgame_month", month);
  47:         localStorage.setItem("birthgame_day", day);
  48:     }
  49: }
  50: -->
  51: </script>

Web Storage はには、localStorage と sessionStorage の2種類がある。それぞれの特徴は下表の通りだ。

名称	特　徴
sessionStorage	一時的にデータを保存する。 ウィンドウを閉じるタイミングで消える。 同じページを複数のウィンドウで開いた場合、別々に保存される。
localStorage	明示的に消去しない限り、データをローカル環境に保持し続ける。

Web Storage は生成元（オリジン）ごとに分離して保存される。生成元とは、プロトコル、ドメイン、ポート番号の3つ組みである。
つまり、プロトコル、ドメイン、ポート番号のいずれかが異なれば、キー情報が同じでも異なるデータ格納領域となる。"/e-soul/webtech/js01/program/birthgame.html" と "/index.html" は同じオリジンである。
また、オリジンが異なるデータ領域へのアクセスをさせないことで、セキュリティを保っている。

• Web Storageを使ってみる：FreeStyleVision
• HTML5のlocalStorageの使い方のまとめ：小粋空間