브라우저 저장소의 종류 💡
브라우저 저장소의 종류는 Cookie, WebStorage 두가지로 나눠지고,
WebStorage는 LocalStorage와 SessionStorage로 이루어져 있습니다.
Cookie와 Web Storage의 차이
우선 Web Storage는 HTML5에 포함되어 있는 스펙으로 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조입니다. 기존의 저장소로 사용되었던 Cookie의 몇가지 단점을 개선한 스펙입니다.
Web Storage는 key-value쌍의 구조로 데이터를 저장하고 key를 기반으로 데이터를 조회할 수 있습니다.
그리고 Local Storage 와 Session Storage로 구성되어 있습니다.
아래는 Cookie와 Web Storage의 차이입니다.
-
웹사이트에서 cookie를 설정하면 이후 모든 요청은 쿠키정보를 포함하여 서버로 전송됩니다. 이는 불필요한 트래픽을 발생시킬 수 있습니다. 반대로 web storage는 데이터가 클라이언트단에 저장만 되어있을 뿐 서버로의 전송은 이루어지지 않습니다.
-
단순한 문자열을 넘어서 web storage는 객체 정보를 저장할 수 있습니다. 문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있는 web storage는 개발 편의성적인 측면으로 cookie보다 편리하다고 할 수 있습니다. 각 브라우저별로 지원여부를 확인해야합니다.
-
web storage는 용량의 제한이 없습니다. cookie의 경우에는 한개의 쿠키당 약 4kb로 제한되어 있고, 총 개수는 300개, 하나의 도메인당 20개로 제한이 되어있습니다. web storage경우에는 이러한 제한이 없습니다.
-
쿠키는 만료일자를 설정하지 않으면 세션쿠키, 설정하면 지속적쿠키로 간주됩니다. 세션쿠키의 경우 메모리에 저장이 되어 브라우저나, 탭이 닫히면 삭제됩니다. 반대로 지속적쿠키의 경우 디스크에 저장되어 임의로 삭제하거나, 만료일이 도래하기 전까지는 데이터가 저장됩니다. web storage의 경우에는 만료기간의 설정이 없습니다.
web storage와 cookie의 차이점에 대해서 web storage가 무조건적으로 좋다고 할 수 없습니다. 하지만 매번 서버로 전송하지 않는 특징은 꽤 유용하다고 할 수 있습니다.
Local Storage 와 Session Storage의 차이
web storage와 cookie의 차이점에 대해 알아보았습니다. 그러면 이제 web storage의 두가지 저장소끼리 비교하겠습니다.
기본적으로 web storage는 cookie와 마찬가지로 도메인 단위로 데이터를 구성합니다. 이는 a라는 도메인의 데이터를 b도메인에서 사용할 수 없다는 뜻이며 보안적인 측면에서 당연합니다.
- Local Storage
저장한 데이터를 지우지 않는한 영구적으로 보관이 가능합니다. 도메인별로 Local Storage가 생성되고, Windows 전역객체의 Local Storage 컬렉션을 통하여 저장과 조회가 이루어집니다. - Session Storage
Session Storage의 경우에는 데이터의 지속성과 액세스 범위에 제한이 있습니다. Windows 전역객체의 Session Storage라는 컬렉션을 통하여 저장과 조회가 이루어집니다.
차이점
- 데이터 유지
Local Storage의 경우 영구적으로 보관이 가능한 반면, Session Storage의 경우에는 세션쿠키와 성질이 비슷합니다. 즉 브라우저가 열려있는 동안에는 페이지를 reload해도 유지가 되며 브라우저가 종료되면 데이터는 삭제됩니다. - 데이터 범위
Session Storage의 경우 web storage의 한 종류이기에 도메인 별로 생성되는 것이 당연합니다. 하지만 추가적으로 같은 사이트의 같은 도메인이라 해도 브라우저가 다르면 서로 다른 저장소를 생성합니다. Session Storage는 브라우징되고 있는 브라우저 컨텍스트 내에서 생성되고 유지되기 때문입니다.
즉 탭 브라우징이나 다른 브라우저를 실행하여 같은 도메인으로 접속하였을 때, 이 두 페이지의 Session Storage는 별개의 영역으로 서로 참조하거나 침범할 수 없다는 뜻입니다. 이는 도메인만 같으면 전역적으로 공유가 가능한 Local Storage와 구분되는 큰 특징입니다.
요약
- 웹에서 데이터를
클라이언트에 저장할 수 있는 방법은Cookie와Web Storage가 있다.
- Cookie는 생성된 이후부터 모든 웹 요청의 헤더에 담겨 서버로 전송된다.
왜 매번 전송? : HTTP의 stateless 때문(통신이 끝나면 상태정보를 저장하지 않는무상태성때문에 정보 저장 및 사용자를 식별하기 위해서는 매번 전송해야함 )
- Cookie는 만료일의 설정 여부에 따라
지속적쿠키,세션쿠키로 나뉘어 간주된다.
지속적쿠키의 경우에는 설정된 만료일에 도래하거나, 임의로 삭제해야 데이터가 삭제된다.
세션쿠키의 경우에는 브라우저를 종료할 경우 삭제된다.
- Web Storage는 HTML5에 포함된 스펙이다.
정보를 서버로 전송하지 않는다.
용량의 제한이 없다.
단순문자열을 넘어 객체정보를 저장할 수 있다.
- Web Storage는
Local Storage와Session Storage로 구성되어있다.
Local Storage는 임의로 삭제 하지 않는 한 영구적으로 보관이 가능하다.
Local Storage는 도메인별로 생성되기 때문에 도메인이 같으면 공유가 가능하다.
Session Storage는 브라우저를 종료하면 삭제된다.
Session Storage는 도메인이 같아도 브라우저가 다르거나, 탭이 다르면 다른 저장소이다. 즉 서로 침범할 수 없다.
