[JavaScript] 자바스크립트에서 쿠키로 로컬 데이터 사용하기

239_자바스크립트에서 쿠키로 로컬 데이터 사용하기

[적용]

• 쿠키에 데이터를 저장하고 싶을 때

---

[문법]

속성	의미	반환
document.cookie	쿠키 참조	문자열

---

[내용]

쿠키(Cookie)는 예전부터 웹 데이터를 저장하거나 세션 관리에 사용되어 왔다.

localStorage는 다양한 데이터 저장이 가능한 것이 특징이지만, 쿠키는 1차원의 문자열만 저장할 수 있다.

쿠키의 값은 클라이언트 쪽에서도 사용하지만, 서버도 불러오기와 값 변경 등 데이터를 공유할 수 있다.

속성은 1차원 데이터만 저장이 가능하므로 복잡한 데이터의 저장은 주의해야 한다.

쿠키의 값은 '=' 나 ';' 등 특수 기호를 사용하며,

한글은 '%82%A0'와 같은 형식으로 인코딩되므로 쿠키 값을 불러오기 위해서는 디코딩이 필요하다.

 

HTML                                                                                                                                                              index.html

<section class="cookie">
  <h2>쿠키</h2>
  <button class="btnSave">저장하기</button>
  <button class="btnRead">불러오기</button>
</section>

JavaScript                                                                                                                                                          main.js

const btnRead = document.querySelector('.btnRead');  // 버튼 요소 가져오기
const btnSave = document.querySelector('.btnSave');  // 버튼 요소 가져오기

// 저장하기 버튼 클릭 시
btnSave.addEventListener('click', () => {
  // 쿠키 저장(대입은 개별로 저장됨)
  document.cookie = 'id=1';
  document.cookie = 'age=30';
  document.cookie = `name=${encodeURIComponent('사자')}`;
});

// 불러오기 버튼 클릭 시
btnRead.addEventListener('click', () => {
  // 쿠키 불러오기
  alert(document.cookie);
});

 

---

[Appendix]

쿠키의 특징

• 쿠키의 특징은 다음과 같다.
• 브라우저가 자동으로 웹 서버에 전송
• 유효 기간 설정 가능
• 미삭제 시 지속 보관
• 도메인 단위로 존재.
• 같은 도메인이라도 http, https는 다른 영역

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김