2014年6月26日木曜日

jquery.cookie.jsを用いてjsonオブジェクト入れて疑似動的な処理的なお話

  • このエントリーをはてなブックマークに追加

何回かブログでも書いたことあるけど、jquery.cookie.jsは中々便利なもの。
cookieを扱うにはサーバーサイドで付加するやり方と、js使って付加するっていう2種類があるけど、
js使って付加する方は何かと面倒な事を書かないといけなかったり。

けどまぁjquery.cookie.jsを使うと楽に出来ますよ的な感じだったりする。
で、その中にjsonとか格納しておくとjsで操作するときにすごく便利で、
動的っぽいような感じのものというか、色んなことが出来る感じ。

ただそこで面倒なことになってくるのがjsonの扱い。
jsonというかJSONを扱えないブラウザっていうのがいくつかあって、
〜Android2.3と〜IE7までは使えない。

ということで今回はJSONが使えないブラウザでもjsonオブジェクト作って、
jquery.cookie.jsに入れて疑似動的な処理的なことを使用という感じのお話をば。 jquery.cookie.js $.cookie("aiueo",JSON.stringify(obj),{expires:expire}); Android2.3とかめんどくさそうなものが多くあるので、json2.js使うとか json2.js

で、Android2.3とかIE7とか死んでるブラウザでどうやってJSONを使えるようにするには、
json2.js(ダウンロード)っていうものを使ってあげればよい。
これはまんま普通に読み込めばそれだけで完了なので特に何も気にする必要は無い的な。

ということでこれでJSONが使えるようになったので、どうやってjson形式のものを保存して使うかは下記で。

var obj = {
  a:"test",
  b:"aaaa",
  c:"json"
};

$.cookie("obj",JSON.stringify(obj),{expires:7});//7日間保存

var read_obj = JSON.parse($.cookie("obj"));
って感じでOK。
まぁ本来だったらIE9以上とかAndroid4以上とかで縛っちゃえば、
HTML5のlocalstorageとか使えるからこんな風な感じにまでする必要はないんだけど。

ただcookieだからヘッダーの文字送信量の限界やら、
https環境下では10個までしかcookieは保存出来ないというすごく面倒なことがあるので、
これらに気をつけて運用しないと403とかくらってしまうよ的な。

ちなみにjsonオブジェクトを入れる理由としては取り出してすぐにその後jsで使えるからっていうだけだけど。
意外とこれが重宝するからオススメだったりする。

Adsense