웹 스토리지와 쿠키

2023-08-10

브라우저에는 자동 로그인, 브라우저 테마 설정, 임시적인 Form 저장과 같은 이유로 사용자 혹은 사이트의 데이터를 보관할 공간이 있어야 한다.

이를 위해, 브라우저는 웹 스토리지와 쿠키를 제공한다.

웹 스토리지

웹 스토리지는 브라우저 내에 key-value 쌍으로 데이터를 저장할 수 있게 해준다.

웹 스토리지의 특징

네트워크 요청 시 서버로 전송되지 않기 때문에 쿠키보다 더 많은 값을 저장할 수 있다. (최대 크기: 5MB)
서버에서 웹 스토리지에 직접 접근할 수 없다.
웹 스토리지에는 로컬 스토리지와 세션 스토리지가 있다.

로컬 스토리지 (localStorage)

브라우저를 종료해도 데이터가 유지된다.
명시적으로 데이터를 지우지 않는 한 영구적으로 저장된다.
같은 도메인의 탭은 같은 로컬 스토리지를 공유한다.

// Frontend

// 키-값 쌍을 보관하기
localStorage.setItem('theme', 'dark');

// 키에 해당하는 값 받아오기
const theme = localStorage.getItem('theme'); // dark
// Frontend

// 키-값 쌍을 보관하기
localStorage.setItem('theme', 'dark');

// 키에 해당하는 값 받아오기
const theme = localStorage.getItem('theme'); // dark

ex) 유저의 선호하는 브라우저 테마를 설정할 때

세션 스토리지 (sessionStorage)

브라우저나 탭이 닫히면 데이터가 삭제된다.
같은 도메인의 탭을 열어도 각각의 탭은 별도의 세션 스토리지를 갖는다.

// Frontend

// 키-값 쌍을 보관하기
sessionStorage.setItem('id', 'doromo');

// 키에 해당하는 값 받아오기
const id = sessionStorage.getItem('id'); // doromo
// Frontend

// 키-값 쌍을 보관하기
sessionStorage.setItem('id', 'doromo');

// 키에 해당하는 값 받아오기
const id = sessionStorage.getItem('id'); // doromo

ex) input form 및 일회성 로그인

쿠키

모든 HTTP request에 자동으로 쿠키가 포함되기 때문에 브라우저에 있는 쿠키를 서버가 직접 접근할 수 있다.

// Backend - cookie-parser 사용

const token = req.cookies.token;
// Backend - cookie-parser 사용

const token = req.cookies.token;

쿠키는 expires, path, httpOnly 등 다양한 options을 설정할 수 있다. (다만 expires나 max-age을 설정하지 않으면, 브라우저가 닫힐 때 삭제되는 세션 쿠키로 작동한다.) | 자세한 내용 링크

// Backend - express

// 서버에서 브라우저에 직접 쿠키 설정하기 
// 서버와 클라이언트의 도메인이 같고, sameSite: "strict"일 때만 가능하다.
res.cookie("token", token, {
  maxAge: 1000 * 3600,
  sameSite: "strict",
  secure: false,
  httpOnly: false,
});
// Backend - express

// 서버에서 브라우저에 직접 쿠키 설정하기 
// 서버와 클라이언트의 도메인이 같고, sameSite: "strict"일 때만 가능하다.
res.cookie("token", token, {
  maxAge: 1000 * 3600,
  sameSite: "strict",
  secure: false,
  httpOnly: false,
});

데이터의 최대 크기는 4KB이다.

ex) 로그인 시 유저의 Authentication 토큰을 저장할 때

예시로 비교해보기

새로운 탭을 열 때

탭이 닫혀도 로컬 스토리지와 세션 쿠키가 아닌 쿠키는 데이터가 유지된다. 하지만 세션 스토리지는 탭이 닫히면 스토리지가 초기화된다.