참고글


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 권고 -->
cs

 


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


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



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

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



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

도로락

IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그

댓글을 달아 주세요! 질문 환영합니다!