[SW] 쿠키 & 웹 스토리지, 로컬 스토리지, 세션 스토리지

 

 

💡 쿠키와 웹 스토리지의 차이점

 

🍪 쿠키 : 브라우저의 작은 저장소

웹사이트 접속 ➡️ 서버가 브라우저로 쿠키 보냄 ➡️ 브라우저는 컴퓨터에 쿠키 저장

➡️ 다시 웹사이트에 접속하거나 리퀘스트를 보내면 쿠키를 서버로 자동으로 전송

• 이름과 값으로 관리하는 문자열 데이터
• 브라우저가 서버로 리퀘스트를 보낼 때 자동으로 보내짐
  • 쿠키 하나당 용량은 최대 4KB, 브라우저에 따라 다르지만 사이트 하나당 약 20개 정도의 쿠키 허용
    (자동으로 서버에 보내지다보니 네트워크에 부담을 주지 않으려고(리퀘스트 헤더의 크기가 커지므로) 용량에 제한이 있음)
  • 누군가 중간에 쿠키를 탈취할 수도 있어, 민감한 개인 정보나 보안 관련 내용은 저장하지 않도록 주의
• 사이트마다 따로 쿠키를 관리, 네이버에선 구글의 쿠키에 접근할 수 없음 (구글, 구글 메일, 구글 캘린더는 공유 가능)
• 브라우저에 임시적 혹은 지속적으로 데이터 저장 가능, 그러나 만료 일자가 넘으면 삭제됨

세션 쿠키 Session Cookie : 브라우저가 닫히면 사라지는 쿠키(기본)

영구(지속적) 쿠키 Persistent Cookie : 브라우저가 닫혀도 유지되는 쿠키, expires 나 max-age 옵션으로 기한 설정

 

Expires 옵션 : 설정한 날짜까지 쿠키 유지

user=choco; Expires=Fri, 05 Apr 2024 07:50:46 GMT

let date = new Date(2025, 3, 12);
date = date.toUTCString(); // 문자열로 변환
const cookie = "user=sohyeon; Expires=" + date;

 

Max-Age 옵션 : 현재로부터 설정된 시간을 더한 시점까지 쿠키 유지, 값 1 = 1초

user=choco; Max-Age=3600; # 한 시간 후로 설정

 

❗️ 만약 Expires 와 Max-Age 옵션이 둘 다 설정되어 있다면 Max-Age 가 우선 순위를 가진다!

 

💡 쿠키 설정 방법

• 서버에서 Set-Cookie 라는 헤더를 리스폰스로 보내주면, 브라우저가 쿠키를 저장
• 자바스크립트의 document.cookie 를 다루는 함수 이용
• js-cookie 와 같은 라이브러리 이용

 

📁 웹 스토리지 : 쿠키의 단점(크기, 서버 전송 등)을 보완한 저장소, 로컬과 세션 스토리지가 있다.

• 임시적(세션) 혹은 영구적으로 데이터 저장이 가능
  (영구 저장 시 쿠키와 달리 '기한' 을 설정할 수 없어, 명시적으로 데이터를 삭제하기 전까진 계속 저장소에 남아 있음)
• 데이터가 서버에 자동으로 전송되지 않음, 따라서 원할 때만 데이터 전송 가능
• 최대 5MB 까지 저장 가능
  (매번 데이터가 전송되지 않으므로 쿠키에 비해 용량이 크다)
• 자바스크립트로만 설정 가능, 쿠키와 달리 서버에서 데이터 추가/수정/삭제 불가능

🚨 웹 스토리지에 저장된 정보들은 js 코드를 통해 탈취 및 조작이 가능하므로 민감한 정보들은 저장하면 안된다.

보안과 관련된 데이터들은 서버 쪽에 저장하고 관리

 

로컬 스토리지

• 오리진(즉, 사이트 주소 - 프로토콜 http/https, 도메인 url, 포트 번호) 별로 생성
  (http://naver.com 와 https://naver.com 은 서로 다른 스토리지를 가짐,
  반면에 오리진이 같다면 여러 탭들 사이에서도 데이터가 공유됨)
• 페이지를 새로고침하거나 창을 닫았다 열어도 유지, 명시적으로 삭제하지 않는 한 데이터가 만료되지 않음
  (메신저 창에 메세지를 쓰다 사이트를 닫아도, 다시 열면 작성 중이던 메세지가 저장되어 있는 경우)
• 데이터 삭제 시 자바스크립트나 브라우저 설정에서 직접 삭제

 

세션 스토리지

• 브라우저 탭별로 각각 생성되며, 탭을 닫는 순간 만료됨
• 새로고침해도 유지

 

💡 웹 스토리지 다루기

// 데이터 저장 및 가져오기
localStorage.setItem('language', 'korean');
localStorage.getItem('language'); // 'korean'

// 숫자나 불리언 타입 저장 시 주의사항
localStorage.setItem('size', 100);
localStorage.getItem('size'); // '100'
localStorage.setItem('darkmode', true);
localStorage.getItem('darkmode'); // 'true'

// 자동으로 문자열로 저장되니, 값을 가져올 때 형변환 필요
Number(localStorage.getItem('size')); // 100
Boolean(localStorage.getItem('darkmode')); // true

// 객체나 배열 저장 시 주의사항
localStorage.setItem('preference', { language: 'korean', size: 100, darkmode: true });
localStorage.getItem('preference'); // '[object object]'

// '[object object]'라는 문자열로 저장되니, JSON.stringify() 를 이용해 문자열로 바꿔서 저장
const preference = { language: 'korean', size: 100, darkmode: true };
localStorage.setItem('preference', JSON.stringify(preference));

// 문자열 값을 다시 객체로 바꾸려면 JSON.parse() 이용
JSON.parse(localStorage.getItem('preference')); // { language: 'korean', size: 100, darkmode: true }

// 데이터 삭제
localStorage.removeItem('language');

// 데이터 모두 삭제
localStorage.clear();

 

 

👀 언제, 어떤 걸 사용하면 좋을까

유저를 식별하는 문자열 같이 서버에 매번 전송해야 하는 데이터

'하루동안 다시 보지 않기' 같은 특정 기한이 있어햐 하는 데이터

➡️ 쿠키 사용

 

서버에 매번 전송하지 않아도 되고, 좀 더 용량이 크고 복잡한 데이터

➡️ 웹 스토리지 사용

 

메신저나 댓글 창에서 아직 전송되지 않은 메세지

사용자 설정이나 테마

자동 로그인 기능

오프라인일 경우, 유저에게 보여줄 데이터를 저장할 때

➡️ 로컬 스토리지 사용

 

여러 단계로 된 입력 폼의 정보 유지 시

일회성 로그인

잠깐 저장하는 장바구니

➡️  세션 스토리지