FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[HTML5]ダウンロードデータのキャッシュとしてWeb Storageを使う

囲碁定石トレーニングを、「ダウンロードした定石データをWeb Storageに格納する」ように修正した。

目次
1. localStorageかsessionStorageか
2. Web Storageを使用可能かチェック
3. Web Storageにデータが存在するかチェック
4. Web Storageにデータを登録する

1. localStorageかsessionStorageか
Web StorageにはlocalStorageとsessionStorageがある。
有効期限が無いlocalStorageの方が、無駄なダウンロードをより削減することができる。
ただし、定石データの変更があった場合にデータの同期を取る必要がある。
今はそこまでしてダウンロードを減らす必要が無いので、タブを開いているときだけ有効なsessionStorageを使うことにした。
Web Storageを使用できない環境では、今まで通りキャッシュ用オブジェクトに格納するようにした。

2. Web Storageを使用可能かチェック
コードは以下のようになった。
  mijoseki.act.isStorage = false;
  try {
    if (typeof sessionStorage != 'undefined' && typeof JSON != 'undefined') {
      sessionStorage.setItem('test000', 'check if storage is available');
      mijoseki.act.isStorage = true;
    }
  } catch(e) {
    mijoseki.act.isStorage = false;
  }
Web Storageが使用可能ならmijoseki.act.isStorageフラグをオンにするだけの処理。
cookieをブロックしていたりすると例外が発生するので、try catchで例外対応をしている。(詳細は[HTML5]Web Storageについて調べるを参照)
例外を発生させるためにダミーデータをsetItemしている。
JSONオブジェクトは、オブジェクト⇔文字列 の変換に使用するためチェックしている。

3. Web Storageにデータが存在するかチェック
コードは以下のようになった。
  /**
   * 問題データキャッシュチェック
   * @param {string} probkey 問題のkey値
   * @return {Object} this.setprob() でセットする問題データ。
   * 該当するキャッシュが無い場合はnull。
   */
  mijoseki.Action_.prototype.chkpCache = function(probkey) {
    var pdata = null;
    if (this.isStorage) {
      pdata = sessionStorage.getItem(probkey);
      if (pdata) {
        pdata = JSON.parse(pdata);
      }
    } else{
      // sessionStorageが使用できない環境での処理
      if (this.pdatacache[probkey]) {
        pdata = this.pdatacache[probkey];
      }
    }
    return pdata;
  };
キー値に該当するデータがあったら、JSON.parse()でオブジェクトに変換してreturnするだけ。

4. Web Storageにデータを登録する
コードは以下のようになった。
  /**
   * 問題データキャッシュセット
   * @param {string} probkey 問題のkey値
   * @param {Object} pdata セットする問題データ
   */
  mijoseki.Action_.prototype.setpCache = function(probkey, pdata) {
    if (this.isStorage) {
      var setdata = JSON.stringify(pdata);
      try {
        sessionStorage.setItem(probkey, setdata);
      } catch(e) {
        // 保存容量オーバーなどでStorage使用不可の場合
        mijoseki.act.isStorage = false;
      }
    } else{
      // sessionStorageが使用できない環境での処理
      if (!this.pdatacache[probkey]) {
        if (this.pdatacname.length >= mijoseki.con.num.climit) {
         // キャッシュ数が上限のため、古いキャッシュを削除
         var delval = this.pdatacname.shift();
         delete this.pdatacache[delval];
        }
        this.pdatacname.push(probkey);
      }
      // pdataをshallow copyしてキャッシュに格納
      var pdatacp = {};
      for (var prop in pdata) {
        pdatacp[prop] = pdata[prop];
      }
      this.pdatacache[probkey] = pdatacp;
    }
  };
Web Storageには(今現在では)オブジェクトを登録できないので、JSON.stringify()で文字列に変換している。
setItemで例外が発生した場合は、キャッシュを登録せずにフラグをオフにする。次にダウンロードしたときに、キャッシュオブジェクトに登録される。
キャッシュオブジェクトでは上限を設定しているが、今の定石データは合計25KB以下なのでsessionStorageでは上限チェックをしていない。

以上。難しいことは何も無かった。
各ブラウザでcookieをブロックしたり許可したりしてテストするのが面倒だったぐらい。
スポンサーサイト

コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。