브라우저를 닫았다가 켜도 전에 하던 작업을 기억하려면 어떻게 해야 할까요?
클라이언트에서 데이터를 저장할 수 있는 방법에 대해 알아보겠습니다.

쿠키

• 브라우저에 저장하는 작은 문자열
• 서버는 요청이 누가 보낸건지 알 수 없기 때문에, 쿠키를 통해 나임을 증명합니다.
• 일반적으로 서버에서 쿠키를 생성 후 클라이언트에게 보내는 응답에 쿠키를 포함시킵니다.
• 만료 기간이 있습니다.
• 비교적 오래되었기 때문에 대부분의 브라우저가 사용 가능합니다.
• httponly 플래그로 막아두면, 쿠키에 접근이 불가능합니다.

사용하기

// 추가하기
document.cookie = "myKey=myValue";
document.cookie = "yourKey=yourValue";

// 읽어오기
// 쿠키는 ;로 구분
const cookie = document.cookie;
console.log(cookie);
console.log(cookie.split(";"));

단점

• HTTP 요청마다 포함되기 때문에 쿠키가 커지면 HTTP Request 크기도 커지고, 서버에 부담이 됩니다.
• 용량이 작습니다.
• 쿠키를 약탈당할 수 있습니다. (HTTP 요청 도중 또는 XSS 공격)

세션

쿠키를 기반으로 하여, 사용자 정보 파일을 서버 측에서 관리합니다.

단점

쿠키보다 보안이 좋지만, 사용자가 많아지면 그만큼 서버의 메모리를 차지하여 과부하가 옵니다.

웹스토리지

• 쿠키의 단점을 보완해 HTML5에서 웹스토리지가 추가되었습니다.
• 로컬스토리지와 세션스토리지로 이루어집니다.
• 객체처럼 key-value 쌍으로 이루어집니다.
  => 문자열로 저장됩니다. (JSON 저장시 JSON.stringify())
• 서버에 불필요하게 데이터를 저장하지 않습니다.
• 쿠키에 비해 용량이 큽니다.
• HTML5에 추가되었기 때문에, HTML5를 지원하지 않는 브라우저는 사용할 수 없습니다.
• XSS 공격을 당해 사용자 정보가 약탈당할 수 있습니다.

로컬스토리지

• 브라우저를 꺼도 값이 유지됩니다.

사용하기

// 로컬스토리지 저장
localStorage.setItem("myKey", "myValue");

// 로컬스토리지 읽어오기
const myValue = localStorage.getItem("myKey");
console.log(myValue); // myValue

세션스토리지

• 브라우저를 닫으면 정보가 삭제됩니다.

// 세션스토리지 저장
sessionStorage.setItem("myKey", "myValue");

// 세션스토리지 읽어오기
const myValue = sessionStorage.getItem("myKey");
console.log(myValue); // myValue

정리

클라이언트에서 데이터를 저장하는 방법에 대해서 공부했습니다.
쿠키 - 세션 - 웹스토리지 순으로 알아보았습니다.
쿠키와 웹스토리지 모두 XSS 공격으로 약탈당할 수 있기 때문에 민감한 정보의 경우 주의가 필요합니다.