웹 스토리지
웹 스토리지(Web Storage)는 브라우저에 데이터를 저장할 수 있게 하는 기술로, HTTP 쿠키와 비슷한 목적을 가지지만, 보다 더 많은 데이터를 저장하고, 사용하기 편리한 API를 제공합니다. 웹 스토리지는 두 가지 형태로 제공됩니다.
세션 스토리지
Window: sessionStorage property
sessionStorage는 window 인터페이스의 읽기 전용 속성으로, 현재 출처의 세션 Storage 객체에 접근할 수 있습니다. sessionStorage는 localStorage와 비슷하지만, localStorage의 데이터는 만료되지 않는 반면, sessionStorage의 데이터는 페이지 세션이 종료되면 지워집니다.
Description
- 브라우저의 특정 탭에서 문서가 로드될 때마다, 해당 탭에 고유한 페이지 세션이 생성되고 할당됩니다. 이 페이지 세션은 그 특정 탭에만 유효합니다.
- 페이지 세션은 탭이나 브라우저가 열려 있는 동안 유지되며, 페이지 리로드와 복원을 거칠 수 있습니다.
- 새 탭이나 창에서 페이지를 열면, 상위 수준 탐색 컨텍스트의 값과 함께 새 세션을 생성합니다.
- 같은 URL로 여러 탭/창을 열면, 각 탭/창에 대한 sessionStorage를 각각 생성합니다.
- 탭을 복제하면, 해당 탭의 sessionStorage가 새 탭으로 복사됩니다.
- 탭/창을 닫으면 세션이 종료되고 sessionStorage의 객체들이 지워집니다.
Examples
Basic usage
// Save data to sessionStorage
sessionStorage.setItem("key", "value");
// Get saved data from sessionStorage
let data = sessionStorage.getItem("key");
// Remove saved data from sessionStorage
sessionStorage.removeItem("key");
// Remove all saved data from sessionStorage
sessionStorage.clear();
Saving text between refreshes
다음 예는 텍스트 필드의 내용을 자동 저장하고 브라우저를 새로 고치면 텍스트 필드 내용을 복원하여 글이 손실되지 않도록 합니다.
// Get the text field that we're going to track
let field = document.getElementById("field");
// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
// Restore the contents of the text field
field.value = sessionStorage.getItem("autosave");
}
// Listen for changes in the text field
field.addEventListener("change", () => {
// And save the results into the session storage object
sessionStorage.setItem("autosave", field.value);
});
로컬 스토리지
Window: localStorage property
localStorage는 window 인터페이스의 읽기 전용 속성으로, 문서의 출처에 대한 Storage 객체에 접근할 수 있습니다. 저장된 데이터는 브라우저 세션 간에 유지되며, 만료 시간이 없습니다. 이는 sessionStorage와 다르게 페이지 세션이 종료되거나 페이지가 닫혀도 데이터가 지워지지 않습니다.
"private browsing" 또는 "incognito" 세션에서 로드된 문서에 대한 localStorage 데이터는 마지막 "private" 탭이 닫힐 때 지워집니다.
Description
- 사용자의 브라우저에 데이터를 반영구적으로 저장하며, 사용자가 브라우저 캐시를 지우지 않는 한 계속 유지됩니다.
- 동일 출처(Same-origin)에서만 접근 가능합니다.
- 로컬 스토리지의 데이터는 사용자가 브라우저를 닫아도 데이터는 계속 유지됩니다.
- 탭을 닫거나 브라우저를 닫아도 데이터가 유지되고 여러 탭 사이에서도 데이터가 공유됩니다.
- 자동 로그인 같은 정보는 로컬스토리지에 저장할 수 있습니다.
file: URL에서 로드된 문서들(즉, 웹 서버에서 제공되는 것이 아니라 사용자의 로컬 파일 시스템에서 직접 브라우저로 열린 파일)에 대한 localStorage 동작의 요구사항은 정의되지 않았으며, 다른 브라우저 간에 달라질 수 있습니다.
현재 모든 브라우저에서, localStorage는 각 file: URL마다 다른 객체를 반환하는 것처럼 보입니다. 즉, 각 file: URL은 고유한 로컬 스토리지 영역을 가지고 있는 것처럼 보입니다. 하지만 그런 동작에 대한 보장은 없으므로, 위에서 언급했듯이 file: URL의 요구사항이 여전히 정의되지 않았기 때문에 이에 의존해서는 안 됩니다. 따라서 브라우저가 localStorage의 file: URL 처리를 언제든지 변경할 수 있습니다. 사실 일부 브라우저는 시간이 지남에 따라 이를 처리하는 방식을 변경했습니다.
Examples
다음 코드 스니펫은 현재 도메인의 로컬 Storage 객체에 접근하고 Storage.setItem()을 사용하여 데이터 항목을 추가합니다.
localStorage.setItem("myCat", "Tom");
localStorage 항목을 읽는 문법은 다음과 같습니다:
const cat = localStorage.getItem("myCat");
localStorage 항목을 제거하는 문법은 다음과 같습니다:
localStorage.removeItem("myCat");
모든 localStorage 항목을 제거하는 문법은 다음과 같습니다:
localStorage.clear();
공통점
- 웹 스토리지는 기본적으로 동기식으로 작동하며, 메인 스레드를 차단합니다. 이는 웹 작업자나 서비스 작업자에 의해 접근이 불가능합니다.
- 대부분의 브라우저에서는 5MB에서 10MB의 저장 공간을 제공합니다. 저장되는 모든 데이터는 문자열 형식이어야 하며, UTF-16 문자열 형식으로 저장됩니다.
- 웹 스토리지의 데이터는 그 문서의 출처에 따라 분리됩니다. 즉, HTTP와 HTTPS로 로드된 문서는 각각 다른 스토리지 객체를 가집니다.
- 웹 스토리지는 동일 출처 정책을 준수하여 각 웹 사이트의 데이터를 격리합니다. 이로 인해 CSRF 공격으로부터 보호받지만, XSS 공격에 취약할 수 있습니다.
- HTML5에 추가된 저장소이며,
key-value형태의 저장소입니다. window객체 안에 담겨있습니다.- 서버는 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없습니다. 웹 스토리지 객체의 조작은 JavaScript 내에서만 수행할 수 있습니다.
웹 스토리지가 쿠키와 다른 점
- 쿠키와 달리 웹 스토리지는 훨씬 더 많은 데이터를 저장할 수 있습니다. 쿠키는 데이터 크기가 4KB로 제한되지만, 웹 스토리지는 약 5MB의 데이터를 저장할 수 있습니다. 필요한 경우, 50MB까지 저장할 수 있는
IndexedDB를 사용할 수 있습니다. - 쿠키는 모든 HTTP 요청에 포함되므로 서버로 전송되는 데이터의 양을 증가시킵니다. 반면에 웹 스토리지는 데이터를 HTTP 요청에 포함시키지 않으므로 네트워크 트래픽을 줄일 수 있습니다.
- 클라이언트 측에서 직접 조작할 수 있는 API를 제공합니다.
- 웹 스토리지에는 만료 기간이 없습니다. 이는 사용자의 세션 정보, 개인화 설정 등을 영구적으로 저장하는 데 유용합니다.
비동기적 스토리지
Cache Storage API, IndexedDB는 비동기적이며, 웹 워커, 서비스 워커, 그리고 window 객체에서 모두 접근할 수 있습니다.
Reference
