今回の予定表アプリケーションの処理で要となる、クライアントサイドへのデータの保存について説明しましょう。クライアントにデータを保存するAPIとしてHTML5で追加されたWeb Storageには現時点で、localStorageとsessionStorageがあります。この二つを総称してWeb Storageと呼んでいるわけです。
Web Storageでクライアントサイドにデータを保存する
localStorageはプログラムあるいはユーザーによって削除されるまで、永続的にデータを保存する機能です。一方、sessionStorageは、データを保存するWebページを開いたWebブラウザが開いている間はデータを保存しておき、Webブラウザが閉じられたらデータを破棄します。この考え方はPHPのセッション変数と同じですね。
比較対象としてcookieによるクライアントサイドへのデータ保存についても解説しておきましょう。cookieではデータを保存しておく期限（有効期限）を、プログラマが任意に設定できます。有効期限を設定しなかった場合、cookieのデータは、Webブラウザを閉じたら破棄されます。有効期限という違いこそあるものの、Web Storageとcookieの考え方は似ていますね。
ただしcookieでは、データを約4Kバイトまでしか保存できません。Web Storageで保存できるデータ容量はWebブラウザの実装によって異なりますが、localStorageの場合、ドメインごとに約5Mバイト保存できるという実験結果があります。ほかに、cookieのデータは、有効期限内であってもWebブラウザで「履歴の削除」などの操作を行うことで消えてしまう危険性があります。Web StorageのlocalStorageであれば、より多くのデータを、より安全に保存できるわけです。
localStorageでのデータの読み書きの方法
localStorage APIが提供するのは、「キー」と「値」のペアでデータを保存するキーバリュー型データベースです。localStorage APIを利用することで、HTMLからファイルに直接読み書きするような感覚で、データを扱えるようになります。cookieをJavaScriptプログラムで扱うよりもはるかに簡単に処理できます。
データを保存するには次のように記述します。
window.localStorage.setItem("キー", "値");
localStorageオブジェクトに対してsetItemメソッドを実行するだけです。冒頭のwindow.は省略できます。例えば、次のようなコードを実行すると、"hello1"というキーに対して"こんにちは"という値を、"hello2"というキーに対して"こんばんわ"という値を保存します。
localStorage.setItem("hello1", "こんにちは");
localStorage.setItem("hello2", "こんばんわ");
キーの名前には日本語2バイト文字を使っても問題ありませんが、JavaScriptのプログラム側で日本語が不適切と判断される場合もありますのでお勧めしません。値の方はもちろん、2バイト文字でも全く問題ありません。
保存したデータを削除する場合は、removeItemメソッドでキーを指定して次のように書きます。
window.localStorage.removeItem("hello1");
あるいは次のように、キーに対して空文字を設定することで実質的にデータを削除することができます。
window.localStorage.setItem("hello1", "");
保存したすべてのデータを削除するにはclearメソッドを使います。
window.localStorage.clear();
localStorageに保存したデータを読み込むには、getItemメソッドを使います。
変数 = window.localStorage.getItem("hello1");
左辺の変数に、キーに対応する値のデータ、この場合なら"こんにちは"が代入されます。
キーは同一ドメイン内で共有できます。つまり、A.comにあるfoo.htmlのページで保存されたlocalStorageの内容は、A.comにあるbar.htmlからでも読み書きできます。同一ドメイン内の複数のページでデータを共有する際には、キー名は「ページ内でユニーク」ではなく、「サイト全体を通してユニーク」になるようにする必要がありますので注意してください。Webページごとに好き勝手にキー名を設定していると、意図しないデータを書き換えたり、削除してしまうなど、バグの素になります。
A.comのWebページを閲覧しているときにlocalStorage APIでクライアントサイドに保存したデータは、別のドメインであるB.comのWebページのlocalStorage APIから読み書きすることはできません。これはセキュリティ上、当然の措置だと言えます。例えば、あるサイトでユーザーの入力の便宜を図るために、キー名nameに氏名を、キー名cardにカード番号を記録した場合に、このデータを別のサイトから見られたのではたまったものではありませんからね。
