JavaScriptのローカルストレージ

以前にもローカルストレージを使って実装した事もありましたが、クッキーでは収まらないサイズのデータを扱うオフラインウェブアプリを作った際に色々調べたことをまとめてみます。

セッションストレージというのもある

セッションストレージは1セッションの間だけデータを保持するストレージ領域で、ウィンドウやタブを閉じれば消える（らしい）です。らしいというのは、今回利用していないからですが、キャッシュ的な使い方をするんでしょうか。

本題のローカルストレージ

ローカルストレージはほっとくといつまでもデータを保存しておいてくれるストレージで、今回あるゲームのマップエディタを作りまして、そのマップデータをローカルストレージに放り込んでおくという使い方をしています。
クッキーだと1つのキーに保存できるデータ量は知れているし、データの有効期限が存在するのも使いにくい理由でした。
ローカルストレージも保存量は無限ではないですが、5MBというそれなりに大きな容量が確保できるのが今回採用した理由です。
エディタで作ったマップを使用するゲームですが、これも公開できる日が来るといいなと思います（まだまだ先の話）。

クッキーより簡単

現実問題、ブラウザの対応次第なので、手堅くクッキーを使うという選択もありなのですが、ローカルストレージを利用するのは非常に簡単。専用のメソッドもありますし、プロパティ方式で直接データにアクセスすることもできるし、連想配列方式でアクセスする事も可能です。ローカルストレージオブジェクトのチェックを済ませば、オブジェクトや連想配列と同じように扱っていい。

if (window.localStorage){
    window.localStorage.setItem("foo", "bar");    // 1
    window.localStorage.foo = "bar";               // 2
    window.localStorage["foo"] = "bar";            // 3
}

取り出す時も、同じように扱えます。

if (window.localStorage){
    var a = window.localStorage.getItem("foo");    // 1
    var b = window.localStorage.foo;               // 2
    var c = window.localStorage["foo"];            // 3
}

上の1、2、3は同じデータにアクセスできます。


データを削除する場合には、選択肢が2つあります。
一つは1つの値だけを削除する方法。
もう一つは保存してある全てのデータを削除する方法。

1つの値だけを削除する方法にはさらに二通りありまして、一つはローカルストレージ用のメソッドremoveItem()を利用する方法。
これは、キーを引数に指定することで削除できるお手軽な方法。
もう一つは、delete演算子を使用する方法。配列っぽくアクセスできるなら、削除もそれっぽくできるということのようです。

ローカルストレージのすべてのデータを削除する方法は、clear()メソッドを利用します。for inで回して、無理やりdeleteを使えなくもないですが、無駄なコードが多すぎます。
全削除と書きましたが、削除できる範囲は、アクセスしているドメインのローカルストレージだけ。example.comドメインのローカルストレージはexample.comからしかアクセスできません。この辺りはクッキーを同じです。

値にJSONをぶち込む

何が超絶便利かというと、JSONを利用してオブジェクトデータをごっそり保存できるのがいいです。クッキーでもできるのですが、こうなるとクッキーでは容量が足りなくなってくる可能性も高いので、クッキーの1000倍以上の容量を擁するローカルストレージを利用するメリットも出てきます。
最近のブラウザにはオブジェクトからJSON、JSONからオブジェクトの相互変換するためのメソッドが用意されていますので、それを利用します。

var obj = {
    foo : 1,
    bar : "text",
};
console.log(JSON.stringify(obj));              // {"foo":1,"bar":"text"}
console.log(JSON.parse(JSON.stringify(obj)));  // Object {foo: 1, bar: "text"}

ローカルストレージ同様、ブラウザの実装によりますので利用前にチェックするか、諦めてjqueryを利用するかで調整します。
コード上必ずJSONを利用するなら曖昧なブラウザの実装を頼るのはダメですね。自分しか使わない、とか実行条件がある程度限られていて使える状況ならば、ブラウザの実装を利用するほうが高速で簡単なので積極的に使っていきたいですね。