2-4. ローカル保存の方法

HTML5を使うとブラウザにデータを保存させる事ができる

samplejpg

HTML5にはWebStorageという機能が追加され、この機能を使う事で簡単にWebブラウザにデータを保存させる事ができるようになりました。 この機能を使えば、ゲームのステータスやハイスコア等を保存しておき、次回のプログラム起動時に利用できるようになります。

本節では、このWebStorage機能の使い方を説明します。

データを保存する

localStorage.setItem("GameName_HighScore","0");

上記のコードでは、"GameName_HighScore"というキー名で"0"という文字列が保存されます。

注意しなければならないのは、Webブラウザはデータの管理をドメイン単位で行うということです。 このため、キー名を単純にしてしまうと、問題が発生する場合があります。

例えば、サイト管理者は「http://t-ishii.la.coocan.jp/hp/HTML5」の下に幾つかのゲームページを作成しましたが、このドメインは独自ドメインではありません。 このため、「http://t-ishii.la.coocan.jp」以下に存在する他サイトで使われるかもしれないデータとサイト管理者が作成したデータは同じ領域で扱われてしまいます。 問題を回避するためには、上記のように、キー名にはゲーム名を入れる等して、他のサイト管理者が作成するかもしれないデータと同じキー名が使われないようにする必要があります。

データを読み出す

highscore = localStorage.getItem("GameName_HighScore");

上記のコードは保存してあった"GameName_HighScore"を読み出します。その結果として、highscoreには"0"が代入されます。

注意しなければならないのは、ローカル環境で使用する場合です。 前述のように、データはドメイン単位で管理されます。 このため、ローカル環境で保存/読み出しメソッドを利用した場合には、一部のWebブラウザでは、サーバー上でプログラムを動作させた場合とは異なる処理が行われます。

2011年1月の時点では、IE9はβ版ですが、ローカル環境でメソッドを使用した場合にはエラーが発生します。 Firefoxでは、ページを読み込む度に値が初期化されます。

データを削除する

localStorage.removeItem("GameName_HighScore");

上記のコードでは"GameName_HighScore"を削除します。 データはブラウザによってユーザーのディスク領域に保存されますので、不要となった場合には削除してディスク領域を開放しておくべきでしょう。

なお、データはブラウザによって保存されるため、ブラウザの記憶領域がユーザーによって初期化された場合にもデータは削除されます。