ローカルストレージにゲームのデータを保存する方法

やっぱりブラウザゲームにもセーブ機能が欲しいよなぁ(´Д｀)

という願いを叶えてくれるのがローカルストレージというブラウザが持っている機能です。このローカルストレージという機能がどういったものかっていうのはさっぱりわからんが、使えると大変便利な機能です。

例えばパズルゲームの進行状況を保存したり(何面までクリアしたか)とか、ハイスコアを記録させたりとか簡単にできます。

まぁローカルストレージの詳しい話はよそのサイトでしてもらうとして(^^;)、私はこんな感じに作りました(‘ω’)ノ

class LocalStorage {
  public name: string;
  public data: any;
  constructor(name: string) {
    this.name = name;
    this.data = {};
  }
  delete() {
    window.localStorage.removeItem(this.name);
  }
  load() {
    let data: any;
    if(window.localStorage){
      data =  JSON.parse(window.localStorage.getItem(this.name));
    }
    if(data){
      this.data = data;    
      return true;  
    }
    return false;
  }
  save() {
    let data = JSON.stringify(this.data);
    if(window.localStorage){
      window.localStorage.setItem(this.name, data); 
    }
  }
}

LocalStorageクラスを作って簡単に使えるようにする

LocalStorageというクラスを作ってストレージを操作する処理を作っています。

各メソッド名そのままの機能です(^^;)

基本的にセーブとロードができればいいんですが、開発してるときにはデータを消したりする必要もあるのでデリートも出来るようにしてあります。

クラスを生成するときに引数にローカルストレージの名前を指定します。この名前でローカルストレージが読み書きされます。

dataはゲーム内容を保存するオブジェクトです。プログラム内ではここに好きなデータを保存します。ハイスコアを保存したいならhiscoreというプロパティを作って値を保存します。

JSON.parse()というのはローカルストレージがJSON形式で保存するためらしく、そのための変換処理を行う命令のようです。

サクッと簡単な説明でしたが、実際ローカルストレージはすごい簡単に使えます(*´ω｀)ただしゲームの進行状況をどういう風に保存するかは自分で考えないといけないのでそっちが問題ですね(‘ω’)ノ

あ。あとこれTypescript用につくってるのでもしjavascriptで使う場合は変数の後の:○○○みたいの(Typescriptの型宣言？)を消せばたぶん動くんじゃないかと思います。

enchant.jsバージョン

この記事はもともとenchant.jsの記事だったのでかつてのenchant.jsバージョンも載せておきます(^^;)

まぁほとんどおんなじですね。

var Storage = enchant.Class.create({ 
  initialize: function(name){
    this.name = name; this.data = {}; 
  }, 
  delete: function(){
     window.localStorage.removeItem(this.name); 
  }, 
  load: function(){ 
    var data; 
    if(window.localStorage){//ローカルストレージ機能が使用可能なら 
      data = JSON.parse(window.localStorage.getItem(this.name)); 
    } 
    if(data){
      this.data = data; 
    } 
  }, 
  save: function(){
    data = JSON.stringify(this.data); 
    if(window.localStorage){ 
      window.localStorage.setItem(this.name, data); 
    } 
  } 
});