Blog

【jQuery】cookieをJSON形式で保存して読み込む方法

2014.04.01Cat:jQuery デザイナー

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デコードする

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

 

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

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

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

 

jQuery全文

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

 

実行するときの例

 

 

 

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ