jQueryプラグインのjQuery.cookieでは簡単にcookieを扱うことができるため、cookieを扱うサイトでは重宝しています。

v1.3以降では、

という、オプションを追加することで、

と行った形でデータを渡せば、JSON形式(連想配列)の文字列でcookieを自動的に保存することができます。

ただ、こちらはJSON.stringify()というIE8以降のブラウザで使うことのできるメソッドを使っているため、IE7以下には対応していません。

そのため、IE7以下に対応する必要がある場合は、別の方法が必要になります。

 

今回お仕事でそれが必要となり、方法を見つけましたので、ご紹介いたします。

 

方法

主な流れは次のような感じです

保存するとき

1. JSON形式(連想配列)のデータを文字列に変換する
2. cookieで保存できるように、URIエンコードする
3. エンコードしたデータをcookieに保存する

読み込むとき

1. cookieを読み込む
2. URIデコードする
3. デコードした文字列をeval()を使ってJSON形式(連想配列)のデータに変換する

 

保存するとき

1.JSON形式(連想配列)のデータを文字列に変換する

cookieに保存するときは、文字列でなければいけないので、JSONとして記述している形をそのまま文字列に変換します。

JSONは基本連想配列と同じ形式なので、for inによる繰り返し処理を使いました。

タブ(‘¥t’)や改行(‘¥n’)は別につける必要はないのですが、今回はデータを確認しやすいように追加して整形しています。

この例では2階層までの連想配列に対応しており、更に階層が必要な場合は、

のところを、

の様な感じで、段々と入れ子にする必要があります。

 

 2.cookieで保存できるように、URIエンコードする

cookieではセミコロン’;’、カンマ’,’と行った記号や日本語がそのままでは保存できないので、URIエンコードを行って保存できる形式に変換します。

toString()でデータを文字列に変換した上で、さらにencodeURI()でエンコードを行っています。

 

3.エンコードしたデータをcookieに保存する

jQuery.cookieを使って、cookieにデータを保存します。

 

読み込むとき

1.cookieを読み込む

jQuery.cookieを使って、cookieにデータを読み込みます。

 

2.URIデコードする

JavaScript

cookieData = decodeURI(cookieData);

1	cookieData = decodeURI(cookieData);

decodeURI()でエンコードされていたデータをデコードして元の文字列に戻します。

 

3.デコードした文字列をeval()を使ってJSON形式(連想配列)のデータに変換する

JavaScript

cookieData = eval( '('+cookieData+')' );

1	cookieData = eval( '('+cookieData+')' );

デコードしただけでは文字列のままで、配列として使うことができないので、

eval()を使って元のJSON形式(連想配列)のデータに変換します。

 

jQuery全文

クッキーはサイト内で幅広く使うことが多いので、この例ではプチプラグイン化を行っています。

jQuery全文

JavaScript

/* cookieを読み込み */ $.fn.getCookieData = function(){ cookieData = $.cookie('example'); cookieData = decodeURI(cookieData); cookieData = eval( '('+cookieData+')' ); return cookieData; } /* cookieを保存 */ $.fn.saveCookieData = function(cookieData){ var contain = "{\n"; for(var keyString in cookieData) { if(cookieData[keyString] == "[object Object]"){ contain += "\t" + keyString + ":{\n" for(var keyString2 in cookieData[keyString]) { contain += "\t\t" + keyString2 + ":'" + cookieData[keyString][keyString2] + "',\n"; } contain = contain.slice(0, -2); contain += "\n\t},\n"; }else{ contain += "\t" + keyString + ":'" + cookieData[keyString] + "',\n"; } } contain = contain.slice(0, -2); cookieData = contain + "\n}"; cookieData = encodeURI(cookieData.toString()); $.cookie('example', cookieData, { expires : 1 }); }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

/* cookieを読み込み */ $.fn.getCookieData = function(){   cookieData = $.cookie('example'); cookieData = decodeURI(cookieData); cookieData = eval( '('+cookieData+')' );   return cookieData;   }   /* cookieを保存 */ $.fn.saveCookieData = function(cookieData){   var contain = "{\n"; for(var keyString in cookieData) { if(cookieData[keyString] == "[object Object]"){ contain += "\t" + keyString + ":{\n" for(var keyString2 in cookieData[keyString]) { contain += "\t\t" + keyString2 + ":'" + cookieData[keyString][keyString2] + "',\n"; } contain = contain.slice(0, -2); contain += "\n\t},\n"; }else{ contain += "\t" + keyString + ":'" + cookieData[keyString] + "',\n"; } } contain = contain.slice(0, -2); cookieData = contain + "\n}"; cookieData = encodeURI(cookieData.toString());   $.cookie('example', cookieData, { expires : 1 }); }

 

実行するときの例

JavaScript

var data = { data1 : "100", data2 : "abcde", data3 : { data3-1 : "fghij" } } //読み込み $(window).getCookieData(data); //保存 $(window).saveCookieData(data);

1 2 3 4 5 6 7 8 9 10 11 12 13

var data = {   data1 : "100",   data2 : "abcde",   data3 : {     data3-1 : "fghij"   } }   //読み込み $(window).getCookieData(data);   //保存 $(window).saveCookieData(data);