カスタムデータ属性（data-*）の値に複数設定、それを取得する方法
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。
カスタムデータ属性（data-*）は基本、属性値を１つのみしか設定できませんが、いわゆる配列 、オブジェクト化させることで複数設定が可能になります。
以下方法です。
複数設定パターン
1. 配列
<div id="id1" data-test1='["name","age","sex"]'></div>
2. オブジェクト
<div id="id2" data-test2='{"name":"名前","age":"年齢","sex":"性別"}'></div>
取得方法
var arr = $('#id1').data('test1');
var obj = $('#id2').data('test2');
console.log(arr[1]); // age
console.log(obj.name); // 名前
注意点
要素の括りについて
複数設定する時は必ずシングルクォーテーションで囲んで、中の文字列はダブルクォーテーションで囲みましょう。
デモ（成功パターン）
https://jsfiddle.net/z56ryn6L/
デモ（失敗パターン）
https://jsfiddle.net/z56ryn6L/1/
失敗パターンでは、配列時は全体が文字列と化しているので、そこから何番目のものかを取得してきています。 オブジェクトの場合は key から value を参照できません。
ちなみに value 部分に数値が入る時はダブルクォーテーションで囲まなくても大丈夫ですが、01 や 001 といった場合は判定されないようです。
取得時のメソッド
カスタムデータ「属性」ではあるのですが、配列とオブジェクトを設置している時に attr() で対応すると上記の失敗パターンと同じ結果で返ってきます。
デモ（失敗パターン）
https://jsfiddle.net/z56ryn6L/2/
attr() 自体はあくまでも属性名を取得して value を返すメソッドで、 data（） は key や object として取得してきてくれるメソッドなので、対応できるようです。
配列やオブジェクトのように複数設定した属性取得の場合は data() で行うようにしましょう。
undefined について
データ値として判定できないので、この時に限り使用できません。
当たり前ですが文字列として設定すれば取得できます。
<div
id="id3"
data-test3='{"key1":"value1","key2":"value2","key3":"undefined"}'
></div>
<div
id="id4"
data-test4='{"key1":"value1","key2":"value2","key3":undefined}'
></div>
// 成功例 -- オブジェクトで返ってくる
var obj1 = $('#id3').data('test3');
console.log(obj1);
// Object {key1: "value1", key2: "value2", key3: "undefined"}
// key1:"value1"
// key2:"value2"
// key3:"undefined"
// 失敗例 -- 文字列で返ってくる
var obj2 = $('#id4').data('test4');
console.log(obj2);
// {"key1":"value1","key2":"value2","key3":undefined}
また、現状 jQuery ではなく、ネイティブ JavaScript で上記のようにデータ属性の配列・オブジェクトを取得する方法は見つけられませんでした…（文字列として返ってくる）。情報求む。