[책] 자바스크립트 코드 레시피 278 - 217일차

쿠키로 로컬 데이터 사용하기

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

구문

document.cookie 쿠키 참조

설명

쿠키(cookie)는 예전부터 웹 데이터를 저장하거나 세션 관리에 사용되어 왔습니다. localStorage는 다양한 데이터 저장이 가능한 것이 특징이지만, 쿠키는 1차원의 문자열만 저장할 수 있습니다. 쿠키의 값은 클라이언트 쪽에서도 사용하지만, 서버도 불러오기와 값 변경 등 데이터를 공유할 수 있습니다. 속성은 1차원 데이터만 저장이 가능하므로 복잡한 데이터의 저장은 주의해야 합니다. 쿠키의 값은 '='나 ';' 등 특수 기호를 사용하며, 한글은 '%82%A0'와 같은 형식으로 인코딩되므로 쿠키 값을 불러오기 위해서는 디코딩이 필요합니다.

실습

index.html

<section class="cookie">
  <h2>쿠키</h2>
  <input type="text">
  <button class="btnSave">저장하기</button>
  <button class="btnRead">불러오기</button>
  <button class="btnClear">전체 삭제하기</button>
</section>

---

script.js

const cookie = document.querySelector('.cookie');
const btnSave = document.querySelector('.btnSave');
const btnRead = document.querySelector('.btnRead');
const btnClear = document.querySelector('.btnClear');
const input = document.querySelector('input');

btnSave.addEventListener('click', () => {
  // document.cookie = 'id=1';
  document.cookie = `이름=${input.value}`;
  document.cookie = 'age=30';
  document.cookie = `name=${encodeURIComponent('사자')}`;
});

btnRead.addEventListener('click', () => {
  alert(document.cookie);
});