ブラウザのストレージを使ってみる

HTML5 WebStorageを使うと、Key-Valueペアで、ブラウザ（ローカル環境）にデータが保存できる。

#Cookie vs WebStorage

WebStorageは、sessionStorage・localStorageの2種類ある。

	別ウィンドウでのデータ共有	データの有効期限
クッキー	○	指定期限まで有効
sessionStorage	×	ウィンドウやタブを閉じるまで有効
localStorage	○	永続的に有効

各ストレージのデータ量上限は、ブラウザによって異なる。
下記に詳しく解説されている。

• 参考：モダンブラウザのストレージ容量まとめ

#実装

localStorageを用いて実装してみた。
cacheHandler.jsでキャッシュを扱う処理を用意。
main.jsで、キャッシュにデータがなければ、取得し、キャッシュに保存する。

cacheHandler.js

/**
 * コンストラクタです。
 * @constructor
 */
function CacheHandler() {
}
 
/**
 * HTML5 localStorage からキーに対応するデータを取得します。
 * @param storageKey キー
 * @returns {*} JSON
 */
CacheHandler.prototype.getCache = function (storageKey) {
    return angular.fromJson(sessionStorage.getItem(storageKey));
};
 
/**
 * HTML5 localStorage にデータを格納します。
 * @param storageKey キー
 * @param data JSON
 */
CacheHandler.prototype.setCache = function (storageKey, data) {
    sessionStorage.setItem(storageKey, angular.toJson(data));
};
 
/**
 * HTML5 localStorage のデータを削除します。
 * @param storageKey キー
 */
CacheHandler.prototype.removeCache = function (storageKey) {
    sessionStorage.removeItem(storageKey);
};

main.js

// ページ読み込み時に実行したい処理
$().ready(function () {
    var key = "dataKey";
    var cacheHandler = new CacheHandler();
 
    // キャッシュからデータを取得する
    var data = cacheHandler.getCache(key);
 
    // キャッシュがあればそれを返す
    if (!data) {
        // データを取得する処理
        data = <どこかから取得したデータ>;
        // キャッシュに格納する
        cacheHandler.setCache(key, data);
    }
 
    return data;
});

これだけの実装だとキャッシュが最新状態かどうか判断できないので、
キャッシュ元データが最新版か確認し、そうでなければ再び取得などの処理が必要。
また、キャッシュの削除処理もどこかに組み込みたい。