Javascript DATA 속성

html 에서는 데이터를 저장하고 들고 있기가 어렵다.

 

그래서 편법으로 사용되던 방식이 "display: none,", "visibility: hidden" 를 사용하여 태그를 숨기고 해당 태그에 데이터를 잠시 보관하는 방식이다. (실제로 첫 번째 프로젝트에서 해당 방법을 사용하였다. 보안적으로 문제가 되지 않는 작업이니 그렇게 사용하라고 사수가 말해주었...)

 

하지만 HTML5 부터는 DATA 속성을 지원한다. ( html 태그 내 data-***="testData" 와 같은 방식으로 사용되는 친구들)

 

개인적으로 공부하면서 듣던 강의에서는

"실제 현업에서 DATA 속성을 사용하는 걸 본인은 못 봐서 잘 사용하는지 모르겠다. 알고 있으면 나쁠 건 없어 보인다"

라는 말을 들었으나 이번 프로젝트에서 아주아주 유용하게 사용하게 되었고 기억을 남기기 위해 해당 문서를 작성한다.

 

Data 속성??

"data-****" 태그 속성 내에서 이러한 포맷을 갖는 친구들을 Data 속성이라 한다.

 

샘플HTML

<select	class="testClass"
	data-opt='{"code":"=== 선택 ===", "value":""}'
        data-name="testDataName"
        data-index="1"
        id="testId">
</select>

위 html 에서 "data-opt", "data-name", "data-index"와 같은 친구들이다.

 

Javascript에서는 다음과 같이 사용(접근)이 가능하다.

const testSelect = document.getElementById('testId');

testSelect.dataset
testSelect.dataset.opt
testSelect.dataset.name
testSelect.dataset.index

예상하는 바와 같이...

출력 결과

다음과 같이 출력이 된다.

 

값 변경은 다음과 같다.

testSelect.dataset.index = 2;

 

그럼 jQuery는 어떻게 사용(접근)하면 될까?

#(select).data(key) 로 접근이 가능하다.

$('#testId').data('opt');
$('#testId').data('name');
$('#testId').data('index');

위와 같이 접근이 가능하며 위 결과를 출력하면...

출력 결과

위와 같이 출력된다.

 

Jquery에서 값 변경은 다음과 같다.

#(select).data(key, value)

$('#testId').data('index', 3)

 

물론 삭제도 가능하다.

$(selector).removeData(key)

 

편법(?)으로 다음과 같이 사용(접근)이 가능하다.

$('#testId').attr('data-name');

 

그리고 이건 샘플!

https://seokbong.tistory.com/11

Javascript Data 속성 활용 예시