jQuery - data — 맞왜틀

data()

정의

HTML 엘리먼트 내에 데이터를 저장하고 읽는 역할을 하는 함수

역할 (왜 씀?)

서버에서 조회된 데이터를 추후 ajax 통신을 하기 위한 data 저장 (주로씀)

js 에 데이터를 저장하기 위한 변수를 따로 설정할 필요가 없어짐

사용법

1. 데이터 저장하기

엘리먼트에 <key, value> 로 저장할 수 있다. ( 약간 로컬스토리지 쓰는 느낌? )

key는 스트링 형태만 가능하고, value 는 자바스크립트에서 지원하는 모든 형태가 가능하다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Jquery CDN // -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- // Jquery CDN -->
    <title>Jquery - data</title>
  </head>
  <body>
    <div id="save-data">이 엘리먼트에 데이터 저장해보기</div>
    <button id="get-data">데이터 불러오기</button>

    <script>
      // 데이터 저장하기
      $("#save-data").data("name", "맞왜틀");
      $("#save-data").data("age", "15");
    </script>
  </body>
</html>

2. 데이터 불러오기

엘리먼트에 저장된 데이터를 불러오기

데이터 전체 불러오기

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Jquery CDN // -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- // Jquery CDN -->
    <title>Jquery - data</title>
  </head>
  <body>
    <div id="save-data">이 엘리먼트에 데이터 저장해보기</div>
    <button id="get-data">데이터 불러오기</button>
      /* 추가 */
    <button id="get-name-data">이름만 불러오기</button>

    <script>
      // 데이터 저장하기
        ...
      // 데이터 불러오기 - 전체
      // $(selector).data()
      $("#get-data").on("click", () => {
        const data = $("#save-data").data();
        console.log(data);
      });
    </script>
  </body>
</html>

아래와 같은 결과를 콘솔에서 확인할 수 있다. data() 특정 키를 인자로 넣지 않으면 해당 엘리먼트에 저장된 모든 데이터를 불러온다.

키값으로 특정 데이터만 불러오기

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Jquery CDN // -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- // Jquery CDN -->
    <title>Jquery - data</title>
  </head>
  <body>
    <div id="save-data">이 엘리먼트에 데이터 저장해보기</div>
    <button id="get-data">데이터 불러오기</button>
    <button id="get-name-data">이름만 불러오기</button>

    <script>
      // 데이터 저장하기
        ...
      // 데이터 불러오기 - 전체
        ...
      // 데이터 불러오기 2 - 키 값 넣기
      // $(selector).data(key)
      $("#get-name-data").on("click", () => {
        const data = $("#save-data").data("name");
        console.log(data);
      });
    </script>
  </body>
</html>

엘리먼트에 name 이라는 키로 맞왜틀 이라는 데이터를 저장해뒀으므로 해당 데이터를 불러온다.

3. 데이터 삭제하기

엘리먼트에 저장 된 데이터를 삭제할 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Jquery CDN // -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- // Jquery CDN -->
    <title>Jquery - data</title>
  </head>
  <body>
    <div id="save-data">이 엘리먼트에 데이터 저장해보기</div>
    <button id="get-data">데이터 불러오기</button>
    <button id="get-name-data">이름만 불러오기</button>
      /* 추가 */
    <button id="remove-data">데이터 삭제하기</button>

    <script>
      // 데이터 저장하기
        ...
      // 데이터 불러오기 - 전체
        ...
      // 데이터 불러오기 2 - 키 값 넣기
        ...

      // 데이터 삭제하기 - 전체
      // $(selector).removeData()
      $("#remove-data").on("click", () => {
        $("#save-data").removeData();
        console.log("삭제^^");
      });
    </script>
  </body>
</html>

키값을 넣지 않았으므로 전체 데이터가 삭제된다.

역시나 특정 키값을 인자로 넣어서 해당 값만 삭제할 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Jquery CDN // -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- // Jquery CDN -->
    <title>Jquery - data</title>
  </head>
  <body>
    <div id="save-data">이 엘리먼트에 데이터 저장해보기</div>
    <button id="get-data">데이터 불러오기</button>
    <button id="get-name-data">이름만 불러오기</button>
      /* 추가 */
    <button id="remove-data">데이터 삭제하기</button>

    <script>
      // 데이터 저장하기
        ...
      // 데이터 불러오기 - 전체
        ...
      // 데이터 불러오기 2 - 키 값 넣기
        ...
      // 데이터 삭제하기 - 전체
        ...

      // 데이터 삭제하기 - 키 값 넣기
      // $(selector).removeData(key)
      $("#remove-name-data").on("click", () => {
        $("#save-data").removeData("name");
        console.log("name만 삭제^^");
      });
    </script>
  </body>
</html>

엘리먼트에 name 이라는 키로 저장되어있는 데이터를 삭제했다.

사용한 이유?

레거시 코드를 수정하는데 서버에서 받아오는 데이터가 중구난방으로 임시(?) 저장된 상태...

어떤 데이터들은 input 엘리먼트를 생성하여 히든값으로 저장

또 다른 데이터들은 html5에서 지원하는 엘리먼트에 data- 형식으로 저장되어 있었다.

데이터를 받아서 약간 수정 or 추가를 하고 다시 서버에 전달해야 하는 상황이므로

모든 데이터의 형식과 임시저장 방식을 통일하기 위해서 찾아낸 구세주같은 방법... (원래 jquery 를 잘 사용하지 못함 🤣)

마치며... (추가?)

예전에는 개발자들이 엘리먼트에 데이터를 저장해두기 위해 <div name="twosome"> 이라고 없는 속성을 만들어서 저장해두기도 했다.HTML 표준이 아니기도하고 개발자마다 정의하는게 달라서 불편... 하지만 <div data-name="twosome"> 이렇게하라고 HTML5 가 권장한다.

이렇게 엘리먼트에 data-key형태로 저장되어 있으면 jquery 로 가져오는 것은 동일하다. $(selector).data(key)

하지만 엘리먼트에 그 내용이 그대로 보여지게 된다. jquery 로 따로 저장하게 되면 그 내용은 보이지 않는다.

전체코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Jquery CDN // -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- // Jquery CDN -->
    <title>Jquery - data</title>
  </head>
  <body>
    <div id="save-data">이 엘리먼트에 데이터 저장해보기</div>
    <button id="get-data">데이터 불러오기</button>
    <button id="get-name-data">이름만 불러오기</button>
    <button id="remove-data">데이터 삭제하기</button>
    <button id="remove-name-data">데이터 삭제하기</button>

    <script>
      // 데이터 저장하기
      $("#save-data").data("name", "맞왜틀");
      $("#save-data").data("age", "15");

      // 데이터 불러오기 - 전체
      $("#get-data").on("click", () => {
        const data = $("#save-data").data();
        console.log(data);
      });

      // 데이터 불러오기 2 - 키 값 넣기
      $("#get-name-data").on("click", () => {
        const data = $("#save-data").data("name");
        console.log(data);
      });

      // 데이터 삭제하기 - 전체
      $("#remove-data").on("click", () => {
        $("#save-data").removeData();
        console.log("삭제^^");
      });

      // 데이터 삭제하기 - 키 값 넣기
      $("#remove-name-data").on("click", () => {
        $("#save-data").removeData("name");
        console.log("name만 삭제^^");
      });
    </script>
  </body>
</html>

저작자표시 비영리 변경금지