[TIL] localStorage, sessionStorage, cookie

Window.localStorage

localStorage는 Document의 Storage객체에 접근할 수 있다. 저장한 데이터는 브라우저 세션 간에 공유된다. localStorage의 데이터는 만료되지 않는다.
=> 브라우저를 닫아도 유지됨

localStorage에 저장한 자료는 페이지 프로토콜별로 구분하는데 특히 HTTP로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS와는 다른 localStorage에 저장된다.

접근법

쓰기

localStorage.setItem("key","value");

읽기

localStorage.getItem("key");

삭제

localStorage.removeItem("key");

전체 삭제

localStorage.clear();

Window.sessionStorage

현재 출처 세션의 Storage객체에 접근한다. localStorage와 비슷하지만 sessionStorage는 세션이 끝날 때 데이터가 제거된다.

• 페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있다.
• 페이지를 새로운 탭이나 창에서 열면, 세션 쿠키의 동작과는 다르게 최상위 브라우징 맥락의 값을 가진 새로운 세션을 생성한다.
• 같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 sessionStorage를 생성한다.
• 탭/창을 닫으면 세션이 끝나고 sessionStorage안의 객체를 초기화 한다.

sessionStorage또한 localStorage와 같이 HTTP와 HTTPS로 같은 페이지를 방문 했을 때 다른 sessionStorage에 저장된다.

접근법

쓰기

sessionStorage.setItem("key","value");

읽기

sessionStorage.getItem("key");

삭제

sessionStorage.removeItem("key");

전체 삭제

sessionStorage.clear();

Cookie

HTTP쿠키는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용한다. 이를 이용하여 자동 로그인을 구현할 수 있다. 상태가 없는 HTTP 프로토콜에서 상태 정보를 기억시켜 주기 때문이다.

쿠키 주 사용 목적

• 세션 관리
  • 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
• 개인화
  • 사용자 선호, 테마 등의 세팅
• 트래킹
  • 사용자 행동을 기록하고 분석하는 용도

Set-Cookie, Cookie 헤더

Set-Cookie HTTP 응답 헤더는 서버로부터 사용자 에이전트로 전송된다. 간단한 쿠키는 다음과 같이 설정한다.

Set-Cookie: <cookie-name>=<cookie-value>

localStorage vs sessionStorage vs Cookie

용량

• localStorage, sessionStorage: 5~10MB
• cookie: 4KB

접근

• localStorage, sessionStorage: 클라이언트에서만 접근 및 관리 가능
• cookie: HTTP요청과 함께 자동으로 서버에 전송됨. 선택적으로 전송도 가능

보안

• localStorage: 보안 기능도 없고 브라우저를 닫아도 남아있기 때문에 민감한 데이터를 저장하기엔 적합하지 않음
• sessionStorage: 세션이 유지되는 기간에만 데이터를 저장하기 때문에 보안 측면에서 유리함, 주로 휘발성 데이터를 저장할 때 사용함
• cookie: Secure 및 HttpOnly 플래그와 같은 옵션을 사용해서 보안을 강화할 수 있다.
  • Secure: 이 플래그가 설정된 쿠키는 HTTPS 연결을 통해서만 전송된다. 즉, 데이터가 암호화 되어 전송되기 때문에 네트워크를 통한 공격으로부터 보호할 수 있다.
  • HttpOnly: 이 플래그가 설정된 쿠키는 웹 서버에 의해서만 엑세스 될 수 있고, 클라이언트 측 스크립트에서는 접근할 수 없다. 이는 크로스 사이트 스크립팅 공격으로부터 쿠키를 보호하는데 도움이 된다.