이번 글에서는 쿠키와 웹 스토리지에 대하여 배운점을 정리하려합니다.
우선 쿠키란 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일을 의미한다.
쿠키는 key-value로 이루어져있으며 최대 4KB까지 저장 가능하고 만료 기간이 있다.
쿠키의 구성 요소는 다음과 같다.
이름(Name) : 각각의 쿠키를 구별하는데 사용되는 이름
값(Value) : 쿠키의 이름과 관련된 값
유효시간(Expires) : 쿠키의 유지시간
도메인(Domain) : 쿠키를 전송할 도메인
경로(Path) : 쿠키를 전송할 요청 경로
쿠키는 매 서버 요청마다 서버로 쿠키가 같이 전송된다. 이유는 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 서버로 계속 전송이 된다.
하지만 만약 4KB 용량 제한을 거의 다 체운 쿠키가 있다면 요청을 할 때마다 기본 4KB의 데이터를 사용해야 한다. 하지만 4KB 데이터중에는 서버에 필요없는 데이터들도 있다. 이러한 데이터 낭비가 쿠키의 대표적인 단점이다.
쿠키의 대표적인 단점은 다음과 같다.
매 서버 요청마다 쿠키가 전송되어 서버에 부담을 준다.
쿠키의 용량이 작다. (4KB)
암호화가 존재하지않아 정보 도난의 위험이 크다.
웹 스토리지란 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소이다.
웹 스토리지는 각각 로컬 스토리지와 세션 스토리지로 나뉘며 이 두 저장소의 데이터는 서버로 자동 전송되지 않는다.
또한 쿠키처럼 key-value로 이루어져있으며, 두 스토리지는 모두 window 객체 안에 들어있고 Storage 객체를 상속 받기 때문에 메소드가 공통적으로 존재하며 유효기간 없이 약 5MB의 저장공간을 지원한다.
둘의 차이점은 데이터의 영구성이다. 로컬 스토리지는 유저가 직접 데이터를 지우기 전까지 브라우저에 데이터가 남으며, 세션 스토리지는 유저가 윈도우나 브라우저 탭을 닫을 경우 제거된다.
따라서 지속적으로 필요한 데이터는 로컬 스토리지에, 잠깐 동안 필요한 정보는 세션 스토리지에 저장하는게 좋다.
하지만 비밀번호와 같이 중요한 정보는 저장하면 안된다.
다음은 로컬 스토리지와 세션 스토리지의 대표적인
로컬 스토리지(Local Storage)
window.localStarage 객체
브라우저를 종료해도 유지되는 데이터로, 유저가 지우지 않는 한 영구적으로 저장된다.
도메인별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능하다.
서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용한다.
지속적으로 필요한 정보를 저장하기에 좋다. (ex. 자동 로그인등)
세션 스토리지(Session Storage)
window.sessionStarage 객체
세션 쿠키와 달리, 탭 / 윈도우 단위로 세션 스토리지가 생성된다.
즉 window 객체와 동일한 유효 범위 및 생존 기간을 가지며, 탭 / 윈도우를 닫을 시 데이터가 삭제된다.
또한 동일한 탭 / 윈도우라도 다른 도메인이라면 또 다른 세션 스토리지가 생성된다.
서로 다른 세션 스토리지는 서로 영향을 주지 않으며 독립적으로 동작한다.
윈도우 복제로 생성된 경우, 혹은 스크립트로 새 창을 연 경우 세션 스토리지가 복제되어 생성된다.
잠시 동안 필요한 정보를 저장하기에 좋다. (ex. 입력 폼 저장, 일회성 로그인 등)
참고한 곳 : https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048
