[Javascript/HTML5] 데이터 속성을 사용하여 HTML5에 데이터 저장하기

 

 

HTML5에서 추가된 개념으로 데이터 속성을 사용하여 DOM요소에 데이터를 저장할 수 있습니다.
데이터 속성은 'data-*'로 시작합니다.

 

1. HTML

<input type="text" name="user_name" value="홍길동" data-age="20" data-id="hong">

data-age와 data-id란 속성을 추가했습니다.

 

 

2. javascript

* 데이터 속성 가져오기

let element = document.querySelector("input[name=user_name]");
let age = element.getAttribute("data-age");
let id = element.getAttribute("data-id");

console.log(age, id); // 20, hong

* 데이터 속성 변경하기

let element = document.querySelector("input[name=user_name]");
element.setAttribute("data-age", 25);
element.setAttribute("data-id", "gildong");

console.log(element.getAttribute("data-age"), element.getAttribute("data-id")); // 25, gildong

 

3. jquery로 속성 가져오기

* 데이터 속성 가져오기

let element = $("input[name=user_name]");
let age = element.data("age");
let id = element.data("id");

console.log(age, id); // 20, hong

* 데이터 속성 변경하기

let element = $("input[name=user_name]");
element.data("age", 25);
element.data("id", "gildong");

console.log(element.data("age"), element.data("id")); // 20, hong