✅ Web Storage란?
Web Storage는 HTML5부터 제공하는 기능입니다.
해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹 브라우저에 저장할 수 있도록 제공하는 쿠키와 비슷한 기능입니다.
키와 값의 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회합니다.
영구적으로 저장하는 Local Storage와 임시적으로 저장하는 Session Storage를 따로 가지고 있어 데이터의 지속성을 구분하여 선택적으로 사용할 수 있습니다.
Web Storage는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한됩니다.
A 도메인에서 저장한 데이터는 B 도메인에서 조회할 수 없습니다.
✏️ 쿠키와 Web Storage의 비교
쿠키는 HTTP Request에 암호화되지 않은 상태로 사용하기 때문에 보안에 취약합니다.
쿠키는 모든 HTTP Request에 포함되어 웹 서비스 성능에 영향을 줄 수 있습니다.
Web Storage는 데이터가 클라이언트에 저장될 뿐 서버로 전송되지 않아 네트워크 트래픽 비용을 줄여줍니다.
Web Storage는 단순 문자열이 아닌 객체 정보를 저장할 수 있습니다.
문자열 기반 데이터 외에 구조화된 객체를 저장하여 개발 편의성을 높여줍니다.
쿠키는 4KB의 데이터 용량 제한이 있고 Web Storage는 용량의 제한이 없습니다.
쿠키도 하위 키를 이용하여 제한을 극복할 수 있지만 대용량으로 쿠키를 저장할 일은 없습니다.
Web Storage는 만료 기간의 설정이 없어 영구적으로 데이터를 저장할 수 있습니다.
쿠키는 만료 기간을 설정하여 기간이 지난 뒤 제거됩니다. 만약 만료 기간을 설정하지 않으면 세션 쿠키(Session Cookie)가 됩니다. 영구적으로 쿠키를 사용하고자 한다면 만료 기간을 길게 설정하여 해결할 수 있습니다.
❔ 세션 쿠키(Session Cookie)
사용자가 사이트 탐색 시에 관련한 설정들과 선호사항을 저장하는 임시 쿠키입니다.
브라우저를 닫는 순간 삭제됩니다.
❔ 영구 쿠키/지속적 쿠키(Persistent Cookie)
세션 쿠키와 다르게 더 긴 기간동안 유지가 가능합니다.
디스크에 저장되며 브라우저를 닫거나 컴퓨터를 재시작해도 남아있습니다.
제거를 위해서는 수동으로 삭제해야 합니다.
✏️ Local Storage
Local Storage는 브라우저를 닫았다가 다시 열어도 계속 유지됩니다. 저장된 데이터를 직접 제거하지 않는 이상 영구적으로 보관이 가능합니다.
도메인마다 별도로 Local Storage가 생성됩니다. 도메인만 같다면 전역적으로 공유할 수 있습니다.
Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이뤄집니다.
✏️ Session Storage
Session Storage는 브라우저가 열려 있는 한 페이지를 새로고침해도 계속 유지됩니다. 하지만 브라우저를 닫으면 삭제됩니다.
데이터의 지속성과 엑세스 범위에 특수한 제한이 존재합니다. 같은 사이트의 같은 도메인이라도 브라우저가 다르면 서로 다른 영역이 됩니다.
이는 브라우저 컨텍스트가 다르기 때문인데 브라우저 컨텍스트란 Document를 표시하는 환경을 말하며 브라우저가 불러 온 웹 페이지입니다.
Windows 전역 객체의 SessionStorage라는 컬렉션을 통해 저장과 조회가 이뤄집니다.
'Computer Science' 카테고리의 다른 글
| 쿠키와 세션 (0) | 2023.06.27 |
|---|---|
| Flux 패턴이란? (0) | 2023.04.13 |
| [AI] Stable Diffusion을 이용해 원하는 이미지 생성하기 (0) | 2023.03.28 |
| dns-prefetch란? (0) | 2023.03.14 |
| 웹 브라우저에 URL을 입력하면? (0) | 2023.03.14 |