JavaScript의 세션 저장소

1. 웹 스토리지 VS 쿠키
2. 웹 저장소 유형
3. JavaScript의 sessionStorage 객체
4. 세션 저장소에 데이터 항목 추가
5. 제공된 키에 대한 항목 값 가져오기
6. 세션 저장소에서 항목 제거

웹 저장소는 HTML5 웹 API와 함께 도입된 혁신적인 기능 중 하나입니다. 이를 통해 클라이언트 측, 특히 브라우저 내에서 데이터를 저장할 수 있습니다.

데이터는 웹 저장소에 키-값 쌍으로 저장됩니다. 웹 세계에서는 DOM 저장소라고도 합니다.

웹 스토리지 VS 쿠키

저장소 메커니즘으로서 웹 저장소는 쿠키와 더 유사합니다. 웹 저장소를 사용하면 도메인/브라우저 탭 및 프로토콜당 최대 5MB를 저장할 수 있습니다.

따라서 동일한 소스의 웹 페이지는 동일한 웹 저장소에 액세스하고 조작할 수 있습니다. 또한 웹 스토어가 가득 찬 경우 브라우저에서 경고 메시지를 표시할 수 있습니다.

구식 쿠키의 경우 모든 서버 요청과 함께 전송되어야 하므로 성능에 부정적인 영향을 미칩니다. 쿠키와 달리 웹 저장소는 데이터를 서버로 보내지 않습니다.

따라서 쿠키보다 빠르고 안전하게 데이터를 저장하기 위해 사용자의 로컬 컴퓨터 공간을 사용합니다.

웹 저장소 유형

웹 저장소 API에서 사용할 수 있는 두 가지 주요 웹 저장소 유형이 있습니다. 각 유형은 수명과 범위에 따라 구분됩니다.

세션 저장소

세션 저장소는 세션당 데이터 저장으로 제한되므로 브라우저를 다시 로드하거나 닫으면 데이터가 영원히 사라집니다.

로컬 저장소

로컬 저장소는 수명 기간 동안 세션 저장소와 약간 다릅니다. 브라우저를 새로 고치거나 닫았다가 다시 열어도 데이터를 유지할 수 있습니다.

따라서 로컬 스토리지 데이터는 JavaScript API로 데이터를 삭제하거나 브라우저 캐시를 정리할 때까지 만료되지 않습니다.

이 가이드에서는 세션 스토리지 구현 및 사용법에 중점을 둘 것입니다.

JavaScript의 sessionStorage 객체

일반적으로 브라우저의 Window 개체는 sessionStorage 속성을 소유하는 WindowSessionStorage 개체를 구현합니다. 따라서 window.sessionStorage를 호출하면 다음과 같이 웹 Storage 개체의 인스턴스가 생성됩니다.

브라우저 콘솔을 사용하여 이러한 예제를 쉽게 시험해 볼 수 있습니다.

통사론:

window.sessionStorage

위의 시나리오에서 세션 저장소는 비어 있습니다. 따라서 반환된 Storage 개체의 길이는 0입니다.

아시다시피 창 개체는 전역 개체입니다. 따라서 여전히 Storage 개체를 반환하는 sessionStorage 속성에 직접 액세스할 수 있습니다.

sessionStorage

해당 개체는 세션 저장소에서 데이터 항목을 추가, 수정 및 제거하는 데 사용됩니다.

기억해야 할 중요한 점은 세션 저장소가 로드된 페이지의 프로토콜에 따라 다르다는 것입니다. 따라서 HTTP 및 HTTPS를 통해 액세스할 때 동일한 URL에 대한 세션 스토리지가 다릅니다.

간단히 말해서 HTTP 및 HTTPS 페이지에 대해 두 개의 별도 세션 저장 공간을 생성합니다.

window.sessionStorage 개체는 Storage 개체에서 파생되므로 세션 저장 공간을 조작하는 데 필요한 모든 메서드를 상속합니다.

세션 저장소에 데이터 항목 추가

위에서 설명한 것처럼 다음과 같이 Storage 객체의 setItem() 메서드를 사용하여 세션 저장 공간에 새 데이터 항목을 추가할 수 있습니다.

window.sessionStorage.setItem('userVisitCount', 20);
window.sessionStorage.setItem('userBlockCount', 2);

출력:

위의 명령은 userVisitCount 및 userBlockCount라는 이름으로 두 개의 데이터 항목을 설정해야 합니다. Storage 객체가 어떻게 보이는지 확인해 봅시다.

브라우저 개발자 도구를 통해 세션 저장소를 쉽게 확인할 수 있습니다. Chrome에서 개발자 도구를 열고 응용 프로그램 탭을 찾습니다.

창의 왼쪽에서 다음과 같이 세션 저장소 섹션을 볼 수 있습니다.

제공된 키에 대한 항목 값 가져오기

Storage 개체의 getItem 메서드를 사용하여 지정된 항목 키의 값을 쿼리할 수 있습니다.

window.sessionStorage.getItem('userVisitCount');

출력:

예상대로 getItem() 메서드는 userVisitCount의 값인 20을 반환했습니다.

세션 저장소에서 항목 제거

setItem() 및 getItem()과 동일한 패턴에 따라 세션 저장소에서 항목을 제거하는 removeItem() 메서드가 있습니다. userVisitCount 키와 관련된 항목을 제거해 보겠습니다.

window.sessionStorage.removeItem('userVisitCount');

출력:

Storage 개체를 다시 검사해 보겠습니다.

보시다시피 세션 저장소에는 하나의 항목만 사용할 수 있으며 userVisitCount 키는 더 이상 존재하지 않습니다.

또한 clear() 메서드를 호출하여 세션 저장소를 지울 수 있습니다. 이렇게 하면 Storage 개체의 모든 항목이 삭제됩니다.

window.sessionStorage.clear();

예상대로 모든 항목이 세션 저장소에서 삭제되었습니다. 이 명령은 웹 애플리케이션의 상태를 유지하고 쇼핑 카트와 같이 동일한 브라우저 창/탭의 페이지 간에 데이터를 전달해야 하는 애플리케이션에서 매우 유용합니다.