(javascript)ローカルストレージを使ってセーブ・ロードを行う。

長編ゲームを制作するとなると、セーブ機能は必須といえます。

そこで、今回はjavascriptにおけるセーブ・ロードの実装方法を説明します。

なお、今回はローカルストレージ機能を使います。

以下、Coin変数とCount変数と書き込み・読み込みする処理を描きます。

コインクリックゲーム内で使用したコードです。

//////////////////////////////////////////////////
//ローカルストレージへデータ書き込み
//////////////////////////////////////////////////

if(window.localStorage){
window.localStorage.setItem("Coin" , Coin); //CoinというキーでCoin変数を記録
window.localStorage.setItem("Count" , Count);//CountというキーでCount変数を記録
}

//////////////////////////////////////////////////
//ローカルストレージからデータ読み込み
//////////////////////////////////////////////////
if(window.localStorage){  //ローカルストレージ機能が使用可能なら
Coin = parseInt(window.localStorage.getItem("Coin")); //Coinというキーに格納されているCoin変数を読み込み（文字列として読み込むため、parseIntで整数に変換している）
if(!Coin)Coin=0;
Count = parseInt(window.localStorage.getItem("Count"));//Countいうキーに格納されているCount変数を読み込み（文字列として読み込むため、parseIntで整数に変換している） 
if(!Count)Count=1;
 } 

こんな感じで実装します。

ちなみに、iOSだとプライベートブラウズが起動していると保存されません。

配列などを格納するときはJSONを使います。