간단히 말해, 웹 스토리지를 사용하면 웹 응용 프로그램의 성능에 영향을 주지 않고 많은 양의 응용 프로그램 데이터를 로컬로 저장할 수 있습니다. 웹 저장소에 저장된 정보는 모든 요청과 함께 서버로 데이터가 전송되는 쿠키와 달리 웹 서버로 전송되지 않습니다. 또한 쿠키를 사용하면 소량의 데이터(거의 4KB)를 저장할 수 있으므로 웹 저장소를 사용하면 최대 5MB의 데이터를 저장할 수 있습니다. 쿠키의 또 다른 문제는 데이터 용량 제한이 있다는 것입니다. 많은 웹 브라우저에서 쿠키의 데이터 저장 한도는 쿠키당 약 4KB이며, 쿠키당 최소 4096바이트를 권장하는 1997년 사양에 따라 사용됩니다. 구현 시나리오의 예로는 온라인 할 일 목록에 대한 데이터를 저장하거나(실시간이 아닌 간격으로 서버로 푸시) 또는 사용자가 장바구니에 넣는 제품을 저장하는 것이 있습니다. 데이터는 페이지 요청, 여러 브라우저 탭 및 localStorage를 사용하는 브라우저 세션 간에 사용할 수 있습니다. 몇 가지 일반적인 웹 저장소 사용을 설명하기 위해, 우리는 상상력 웹 스토리지 데모라는 간단한 예를 만들었습니다. 방문 페이지는 색상, 글꼴 및 장식 이미지를 사용자 지정하는 데 사용할 수 있는 컨트롤을 제공합니다.
다른 옵션을 선택하면 페이지가 즉시 업데이트됩니다. 또한 선택 사항은 localStorage에 저장되므로 페이지를 떠날 때 나중에 다시로드할 때 선택 사항이 기억됩니다. 인터넷 익스플로러를 포함한 거의 모든 브라우저의 최신 버전은 웹 저장 API를 지원합니다. 웹 저장소에 대한 브라우저 지원에 대한 자세한 내용은 이 페이지를 참조하십시오. 로컬 저장소 영역은 clear() 함수 또는 removeItem(`key`) 함수를 사용하여 지울 수 있습니다. 이 예제에서는 아래 함수가 지우기 단추의 클릭 이벤트에 호출됩니다. 로컬 저장소에 데이터를 검색/쓸 수 있는 매우 간단한 API가 있습니다. 도메인당 최대 10MB의 데이터를 저장할 수 있습니다. 쿠키와 달리 저장된 데이터는 모든 HTTP 요청에 포함되지 않습니다.
오프라인 저장소의 경우 캐시 API를 사용합니다. 이 API는 오프라인 앱을 만드는 데 필요한 Service Worker 기술을 지원하는 모든 브라우저에서 사용할 수 있습니다. 캐시 API는 알려진 URL과 연결된 리소스를 저장하는 데 이상적입니다. 위의 저장소 이벤트에 대 한 창 개체에 이벤트 리스너를 만듭니다. 이벤트가 발생하면 키, oldValue 및 newValue를 본체에 기록하는 기능(예: Firebug 또는 Google Chrome 개발자 도구)이 실행됩니다. DOM 저장소(문서 개체 모델 저장소)라고도 하는 웹 저장소는 웹 앱에 클라이언트 측 데이터를 저장하기 위한 메서드 및 프로토콜을 제공합니다. 웹 저장소는 쿠키와 유사하지만 용량이 크게 향상되고 HTTP 요청 헤더에 저장된 정보가 없는 영구 데이터 저장소를 지원합니다. [2] 두 가지 주요 웹 저장소 유형이 있습니다: 로컬 저장소 및 세션 저장소, 각각 영구 쿠키 및 세션 쿠키와 유사하게 행동.