[Web] LocalStorage, SessionStorage, Cookie

🍪 Cookie

쿠키는 웹 페이지 방문 시 방문 기록, 서버 응답 데이터 등의 정보를 담은 임시 파일이다.

쿠키는 key/value 형태의 문자 데이터로 구성되어 있으며, 최대 4KB, 300개까지 데이터 저장이 가능하다.

쿠키는 웹 브라우저를 이용하고 있는 컴퓨터에 저장되며,  브라우저에서 서버에 요청을 보낼 때 브라우저에 해당 서버의 쿠키 정보가 있다면 기본적으로 쿠키를 담아서 요청을 보낸다.

 

Cookies는 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용된다.

많은 보안 웹사이트들은 로그인을 한 후 Cookies를 사용해 유저의 신원을 확인하여 모든 페이지에서 재인증을 거치지않아도 되게 된다. Cookies의 또 다른 용도는 사이트에서 제한된 인터넷 사용 기록을 기반으로 사용자 경험을 개선하는 것이다. (예. 하루동안 팝업 보지 않기)

 

🥠 Cookie의 구성 요소

• Name : 쿠키 이름
• Value : 쿠키의 저장된 값
• Expires : 쿠키 유효기간 설정
• Domain : 쿠키가 사용되는 도메인 지정
• Path : 쿠키를 반환할 경로
• Secure : 보안 연결
• HttpOnly : http 외 다른 통신 사용 가능
  • HttpOnly 오로지 http 요청이 있을 경우에만 전송

 

🥠 Cookie의 종류

🍪 Session cookies

• 만료일을 포함하지 않는다.
• 브라우저나 탭이 열려있는 동안에만 저장된다.
• 브라우저가 닫히면 cookies는 영구적으로 삭제된다.
• 예) 은행 유저들의 자격 증명을 저장하는데 사용

🍪 Persistent cookies

• 만료일을 포함한다.
• 만료일까지 유저의 디스크에 저장되고 만료일이 지나면 삭제된다.
• 예) 이메일 기억하기

 

🗂️ Web Storage

HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있다.

Web Storage의 개념은 쿠키와 마찬가지로 key/value 쌍으로 데이터를 저장하고 key를 기반으로 데이터를 조회하는 패턴으로, 영구 저장소(LocalStorage)와 임시 저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 용도에 맞는 선택이 가능하다.

 

Web Storage는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념으로 사실 거의 차이가 없지만 몇 가지 쿠키의 단점을 극복하는 개선점이 도입되었다.

 

💡 Web Storage vs Cookie

✔ 쿠키는 웹 요청시 매번 서버로 전송

✔ 단순 문자열을 넘어(스크립트) 객체 정보를 저장 가능

✔ 용량의 제한이 없음

✔ 영구 데이터 저장이 가능

 

💡LocalStorage와 SessionStorage

Web Storage는 데이터의 지속성과 관련하여 두 가지 용도의 저장소를 제공한다.

우선 기본적으로 Web Storage는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한된다. 다시 말해 특정 도메인에서 저장한 데이터는 다른 도메인에서 조회할 수 없다. 

 

📁 LocalStorage

LocalStorage 저장한 데이터를 (명시적으로) 지우지 않는 이상 영구적으로 보관이 가능하다.

앞서 말한대로 도메인마다 별도로 로컬 스토리지가 생성된다.

Windows 전역 객체의 LocalStorage 라는 컬렉션을 통해 저장/조회가 이루어진다.

 

📁 SessionStorage

SessionStorage는 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다.

SessionStorage는 windows 전역 객체의  sessionStorage라는 컬렉션을 통해 저장/조회가 이루어진다.

 

✨ 데이터 유지 측면

SessionStorage는 데이터가 지속적으로 보관되지 않는다.

현재 페이지가 브라우징 되고있는 브라우저 컨텍스트 내에서만 데이터가 유지된다.

LocalStorage는 브라우저를 종료해도 데이터는 보관되어 다음번 접속에도 그 데이터를 사용할 수 있는 반면, SessionStorage는 브라우저가 종료되면 데이터도 같이 지워진다. 즉 브라우저가 종료되면 SessionStorage도 삭제된다.

 

✨ 데이터 범위 측면

SessionStorage 도메인 별로 별도로 생성된다.

여기에 더불어 SessionStorage는 같은 사이트의 같은 도메인이라 할지라도 브라우저가 다르면 서로 다른 영역이 된다. (브라우저 컨텍스트가 다름)

탭 브라우징이나 브라우저를 하나 더 실행해서 같은 페이지를 실행했을 때, 이 두 페이지의 SessionStorage는 각각 별개의 영역으로 서로 침범하지 못한다.

 

WebStorage의 보안은 서로 다른 도메인의 데이터 침범을 막고는 있지만 클라이언트, 즉 사용자를 막고 있지는 않다. 클라이언트는 얼마든지 저장된 값을(임의로)수정이 가능하다. (쿠키와 동일)