jQuery data() 메소드

[ data( ) 함수로 데이터 저장 ]

$(selector).data(key, value)

/** html **/
<span>content</span>

// javascript
$('span').data('name', '성별')

 

[ data( ) 함수로 데이터 읽기 ]

$(selector).data(key)

$(selector).data( )   ----> key를 생략할 경우, 해당 엘리먼트에 저장된 모든 data들이 JSON 형식으로 리턴

 

 

[ data( ) 함수로 데이터 삭제 ]

$(selector).removeData(key)

 

 

---

 

[ data-* 형식으로 데이터 저장 ]

HTML5에서 HTML 엘리먼트에 data-* 형식을 이용해서 데이터를 저장할 수 있게 됐다.

jQuery의 data()를 이용해 저장한 것과 동일한 효과를 가진다.

data-*가 나오기 전에는 개발자마다 가지각색으로 HTML엘리먼트에 허용되지 않는 임의의 속성을 추가해 사용했기 때문에, 유지보수 측면이나 해석할 때 난해하고 지저분했다. 하지만 HTML5로 넘어오면서 data-* 속성이 표준화되었고 이전의 문제점들이 해결됐다.

 

 

[ data-* 형식으로 데이터 읽기 ]

data-를 생략하고 뒷 부분을 이용해 data를 읽음.

ex. data-name으로 데이터를 저장했다면 ---> $(selector).data("name")

 

 

[ data-* 형식으로 데이터 삭제 ]

$(selector).removeData  로 삭제 불가함

====>>>  $(selector).data("name", null)    ==> 저장되어 있는 값을 null 로 변경해주는 방법으로 해결 가능.

 

 

 

 

 

참고 사이트

www.nextree.co.kr/p10155/