jquery data() 함수

jQuery data-xx 속성을 추가해주는 data()함수에 대해
HTML5는 개발자가 DOM 객체에 데이터를 저장해두기 위해 속성을 아무렇게나 정의해서 사용하지 않도록 data-xxx와 같이 data-로 시작하는 속성을 사용하도록 권고합니다. 예를 들어 <span> 태그에 사용자의 나이를 저장해두기위해 age속성을 넣어두고 싶은 경우 <span name="jon”>이 아닌 <span data-name=“jon”>과 같이 사용하도록 권고하는 것입니다.
<span name=“jon"> <!-- HTML 표준이 아님-->
<span data-name="jon"> <!-- HTML5 권고 -->

data() 함수 사용
이에 따라서 jQuery에서도 HTML5 표준에 맞춰 data- 속성을 쉽게 다룰 수 있도록 data(key, value) 함수를 지원하고 있습니다. data() 함수는 key와 value 형식으로 파라미터를 넘겨 사용합니다.
$('span').data('name’, jon); //값 저장

<span data-name=“jon”/>

저장한 데이터를 읽어오는 경우에는 key만 지정해주면 됩니다.
$('span').data('age', 13); //저장
$('span').data('age'); //값을 가져옴 >> 13리턴


data()함수로 JSON 객체 저장 및 가져오기
JSON 객체를 통째로 저장하고 가져올 수 있습니다.
$('span').data('foo', {age:13, name: 'jon'}); //저장
$('span').data('foo'); //JSON 객체 리턴 {age:13, name: 'jon'}

다음과 같이 JSON 문자열이 저장됩니다.
<span data-foo='{"age":"13", "name":"jon"}' />