[jQuery] data-xx 속성을 추가해주는 data()함수에 대해

참고글

• [jQuery] jQuery DOM 요소에 속성 추가, 수정 및 제거하기
• [자바스크립트] 데이터 속성(data-xxx)에 대해

jQuery data-xx 속성을 추가해주는 data()함수에 대해

HTML5는 개발자가 DOM 객체에 데이터를 저장해두기 위해 속성을 아무렇게나 정의해서 사용하지 않도록 data-xxx와 같이 data-로 시작하는 속성을 사용하도록 권고합니다. 예를 들어 <span> 태그에 사용자의 나이를 저장해두기 위해 age 속성을 넣어두고 싶은 경우 <span age="13"> 이 아닌 <span data-age="13">과 같이 사용하도록 권고하는 것입니다.

<span age="13"> <!-- HTML 표준이 아님-->
<span data-age="13"> <!-- HTML5 권고 -->

data() 함수 사용

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

$('span').data('age', 13); //값 저장

<span data-age="13"/>

저장한 데이터를 읽어오는 경우에는 key만 지정해주면 됩니다.

$('span').data('age', 13); //저장
$('span').data('age'); //값을 가져옴 >> 13리턴

data()함수로 JSON 객체 저장 및 가져오기

JSON 객체를 통째로 저장하고 가져올 수 있습니다.

$('span').data('foo', {age:13, name: 'kim'}); //저장
$('span').data('foo'); //JSON 객체 리턴 {age:13, name: 'kim'}

다음과 같이 JSON 문자열이 저장됩니다.

<span data-foo='{"age":"13", "name":"kim"}'  />

주의사항!

data() 함수는 jQuery 버전별로 동작이 다르거나 동작하지 않는 경우가 있는 것 같습니다. 저의 경우에는 data() 함수를 사용하면 최초에는 데이터가 잘 저장되는데, 이후 한번 더 저장하게 되면 변경되지 않는 버그를 겪었습니다. 만약 이러한 경우에는 확실하게 attr('data-age', '13') 과 같이 attr() 함수를 사용하는 방법을 추천드립니다.