오늘의 공부 👍

오늘은 Cookie, Local Storage, Session Storage에 대해서 알아보려고 한다.

📝 Web Storage ( 브라우저 저장소 )

• 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능이다.

• 쿠키(cookie)와 비슷한 기능이며, Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴이다.

• 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다.

▷ LocalStorage

• 저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다.
• 도메인마다 별로도 LocalStorage가 생성된다.
• Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.

▷ SessionStorage

• 브라우저가 열려있는 한 페이지를 Reload 해도 계속 유지된다. 하지만 브라우저를 닫으면 삭제된다.
• Windows 전역 객체의 SessionStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.
• 같은 사이트의 같은 도메인이라도 브라우저가 다르면 서로 다른 영역이 된다.

📝 Web Storage의 특징

▶ 1. 서버 전송이 없다.

• 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송이 이루어지지 않으며, 이는 네트워크 트래픽 비용을 줄여준다.

▶ 2. 단순 문자열을 넘어 객체 정보를 저장할 수 있다.

• 문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있는 점은 개발 편의성을 제공해 주는 주요한 장점이며, 브라우저의 지원 여부를 확인해 봐야 하는 항목이다.

▶ 3. 용량의 제한이 없다.

▶ 4. 영구 데이터 저장이 가능하다.

📝 Web Storage 장점

• 쿠키와 Web Storage 모두 브라우저에 저장되지만 쿠키는 아래와 같은 단점이 있다.

• 쿠키의 단점을 Web Storage를 사용함으로써 극복할 수 있다.

▶ 1. 4KB의 데이터 저장 제한

▶ 2. HTTP Request에 암호화되지 않은 상태로 사용하기 때문에 보안이 취약하다.

▶ 3. 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있다.

📝 Cookie

• 쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다.

• Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.

• 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송한다.

• 브라우저 저장소임에도 불구하고 백엔드와 긴밀히 연결되어 있어 쿠키에 있는 내용을 백엔드에서도 빼내어 볼 수 있다.

• 쿠키에는 추가 옵션 사항들을 적용할 수 있습니다.

  • 이름 - 각각의 쿠키를 구별하는 데 사용되는 이름
  • 값 - 쿠키의 이름과 관련된 값
  • 유효시간 - 쿠키의 유지시간
  • httpOnly, secure - 쿠기들을 안전하게 보관할 수 있도록 보안 강화 기능
  • 도메인 - 쿠키를 전송할 도메인
  • 경로 - 쿠키를 전송할 요청 경로

📝 Web Storage VS Cookie

▶ 1. 쿠키는 매번 서버로 전송된다.

• 웹사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키 정보를 포함해 서버로 전송된다. Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송되지는 않는다.

▶ 2. Web Storage는 단순 문자열을 넘어(스크립트) 객체 정보를 저장할 수 있다. 문자열 기반 데이터 외에 체계적으로 구조화된 객체를 저장할 수 있다.

▶ 3. Web Storage는 용량의 제한이 없다.

• 쿠키는 개수와 용량에 제한이 있다. 그러나 Web Storage에는 제한이 없다. 쿠키도 하위키를 이용하면 이러한 제한을 일부 해소할 수는 있으나, 대용량으로 쿠키를 저장할 일은 없다.

▶ 4. Web Storage는 영구 데이터 저장이 가능하다.

• 쿠키는 만료 일자를 지정하게 되어있어 언젠가 제거된다.

• 만료 일자를 지정하지 않으면 세션 쿠키가 된다.

• 영구 쿠키를 원한다면 만료 일자를 굉장히 멀게 설정하여 해결할 수 있다.

• Web Storage는 만료 기간의 설정이 없다. 즉, 한 번 저장한 데이터는 영구적으로 존재하게 된다.

출처 및 참고
코드캠프