HTML5のdata属性に配列やオブジェクトを格納してjQueryで取得する
- June 20th, 2013
データの格納場所として便利なdata属性（独自データ属性）に、配列やオブジェクトを格納しておいて、jQueryで値を取得する方法をメモ。
HTML
属性の値を「'（シングルクォーテーション）」で囲む。
配列やオブジェクトの値で文字列を使用する場合は「"（ダブルクォーテーション）」で囲まないと、配列やオブジェクトが文字列として認識されてしまう。
<div id="arr" date-arr='[1, 2, "c"]'>
配列の場合
</div>
<div id="obj" date-obj='{"a":1, "b":2, "c":"c"}'>
オブジェクトの場合
</div>
JavaScript (jQuery)
var arr = $('#arr').data('arr');
var obj = $('#obj').data('obj');
console.log(arr[0]); // 出力：1
console.log(obj.c); // 出力：c- June 20th, 2013
