[Web] LocalStorage , sessionStorage , Cookie

토이프로젝트를 진행하면서 로그인 정보 등을 저장했을 때의 어려움을 겪었는데 이를 복습하고자 한다. 

1. 웹 스토리지

: 웹 브라우저에서 클라이언트 측에서 데이터를 저장하고 관리하기 위한 API이다. 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다. 웹 스토리지를 사용하면 사용자의 로컬 브라우저에 데이터를 저장하고, 필요할 때 이 데이터를 검색하거나 수정할 수 있다. 주로 웹 어플리케이션에서 설정, 세션 상태, 캐싱 ,로컬 저장 등 다양한 용도로 활용 된다.  또한 localStorage와 sessionStorage 이 두 가지 형태로 존재 한다. 

 

웹 스토리지는 주로 다음과 같은 용도로 활용된다.

• 사용자 설정 및 환경 설정 저장
• 임시 데이터 저장 (예: 장바구니 데이터)
• 세션 관리 (로그인 상태 유지)
• 오프라인 애플리케이션 데이터 캐싱

2. 웹 스토리지 형태

1) localStorage
    - 데이터를 영구적으로 저장한다. 즉 브라우저를 닫아도 데이터가 유지 된다. 

    - 데이터는 도메인별로 구분되며, 동일한 도메인의 다른 페이지에서도 접근 할 수 있다.

    - 사용자가 데이터를 직접 지우지 않는 이상 데이터는 계속 보존된다

// localStorage에 데이터 저장
localStorage.setItem('username', 'john_doe');

// localStorage에서 데이터 가져오기
const username = localStorage.getItem('username');
console.log(username); // "john_doe"

// localStorage에서 데이터 삭제
localStorage.removeItem('username');

 

2) sessionStorage 
    - 데이터를 세션(session) 동안 즉, 사용자가 브라우저를 열고 닫을 때 까지만 보관한다.

    - 세션 종료 시 데이터는 자동으로 삭제 된다. 

    - 동일한 세션 내에서 다른 페이지에서도 접근 가능하다. 

// 데이터 저장
sessionStorage.setItem('theme', 'dark');

// 데이터 가져오기
const theme = sessionStorage.getItem('theme');
console.log(theme); // "dark"

// 데이터 삭제
sessionStorage.removeItem('theme');

 

2. Cookie 
: 그럼 쿠키는 무엇일까 이는 웹 스토리지 이전부터 존재했던 기술이다. 쿠키는 서버로 매번 데이터를 전송한다. 웹 스토리지는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다는 점에서 차이가 있다. 또한 하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개 , 최대 쿠키 크기는 4KB로 제한되어 있다. 또한 만료일자를 지정하게 되어 있어서 언젠가 제거된다는 점에서 차이가 있다.