웹 페이지를 제작할 때, 브라우저에 데이터를 저장하는 것은 필수적인 부분이다.
브라우저에 데이터를 저장해야 하는 이유에 대하여 알아보자.
브라우저에 데이터를 저장하는 이유
웹 페이지에서 Client와 Server는 HTTP 프로토콜을 통해 통신을 진행한다. 이때, HTTP가 가지는 특징인 stateless로 인하여 요청 간의 연관성이 없다. 따라서, 각각의 요청은 독립적으로 처리되기 때문에, 예를 들어 로그인 정보를 유지하는 경우에 매번 요청에 사용자의 로그인 정보를 서버에 전달해야 한다. 매번 로그인 정보를 서버에 전달하게 되면, 서버의 부담이 늘어나고, 웹 페이지의 성능도 저하되는 문제가 발생한다.
따라서, 브라우저에 이러한 상태 정보들을 저장하게 된다면, 매번 서버에 해당 데이터를 전달하지 않아도 되며, 이를 통해 웹 페이지의 성능을 향상시키고, 서버의 부담을 줄일 수 있다.
브라우저에 데이터를 저장하는 방법
Cookie
쿠키는 브라우저에 저장되는 작은 크기의 문자열로, HTTP 프로토콜의 일부이다.
브라우저와 서버 간 통신에서 서버가 HTTP 응답 헤더에 Set-Cookie 에 내용을 넣어 전달하면, 브라우저는 해당 내용을 브라우저에 저장하게 되며, 이렇게 저장된 데이터를 쿠키라고 부른다.
- 용량 4KB
- 사용자가 방문한 웹 사이트에서 브라우저에 저장되는 키-값 쌍의 데이터
- 이름, 값, 만료 날짜, 경로 등의 정보로 구성
- 웹 사이트에서 사용자의 로그인 정보 등을 저장할 때 사용
- 브라우저 설정에 따라 쿠키의 용량과 수명이 결정
Web Storage API
HTML5에서 추가된 기능으로, cookie와 비교하여 직관적으로 키-값 쌍의 데이터를 안전하게 저장할 수 있다. local storage와 session storage를 제공하며, 둘 다 동일한 메서드와 프로퍼티를 제공하며, 용량은 둘 다 동일하게 평균 5MB까지 저장 가능하다. 또한, 데이터를 JSON 형태로 저장하기 때문에, JSON.stringify, JSON.parse와 같은 메서드를 사용해야 한다.
Local Storage
- 키-값 쌍의 데이터 형식으로 저장
- 해당 도메인 내에서 데이터가 유지되어, 종료 후 다시 접근해도 데이터가 유지
- 즉, 같은 도메인이라면, 새로운 창이나 새로운 탭으로 접근해도 데이터가 유지
- 브라우저에 따라 용량이 다를 수 있음
- 종료 시에도 데이터가 유지되므로 보안 취약점이 발생할 수 있음
Session Storage
- local storage와 유사한 방식으로 데이터를 저장
- 도메인, 윈도우, 탭 별로 독립적인 공간
- 세션 종료시 데이터가 삭제되며, 이는 해당 윈도우나 탭을 종료해도 삭제됨
IndexedDB
- Web Storage과 비교하여 많은 양의 구조화된 데이터를 다루기에 적합
- 키-값 쌍의 NoSQL DB와 유사한 JSON 객체의 컬렉션 개념
- 데이터 생성 시 생성되는 키를 인덱스로 사용하여 객체(데이터)에 접근
- web storage와 다르게 문자열 타입이 아니더라도 저장이 가능
- JS가 인식할 수 있는 자료형과 객체를 저장할 수 있음
Reference
