“Session Storage”, 브라우저를 닫는 순간 사라진다

들어가며

웹사이트를 개발하다 보면 브라우저에 데이터를 저장해야 하는 순간이 생각보다 자주 생깁니다.

로그인 상태를 유지하거나, 사용자가 선택한 옵션을 기억하거나, 페이지를 이동해도 특정 데이터를 유지해야 하는 경우가 대표적입니다.

이럴 때 가장 먼저 떠올리는 것이 Local Storage일 수 있습니다. 그런데 모든 데이터를 Local Storage에 넣는 것이 좋은 방법은 아닙니다.

특히 현재 브라우저 탭이나 세션이 유지되는 동안에만 필요한 데이터라면 Session Storage가 더 적합할 수 있습니다.

오늘은 개발자 도구에서 직접 확인할 수 있는 Session Storage란 무엇인지, Local Storage와 어떤 차이가 있는지, 그리고 실제 개발에서는 어떻게 활용하는지 정리해보겠습니다.

Session Storage란 무엇일까?

Session Storage는 웹 브라우저가 제공하는 클라이언트 측 데이터 저장 공간입니다.

쉽게 말하면 웹페이지에서 사용하는 데이터를 브라우저 내부에 잠시 저장해 두는 기능이라고 생각하면 됩니다.

가장 큰 특징은 이름 그대로 세션(Session) 단위로 데이터가 유지된다는 것입니다.

예를 들어 사용자가 웹사이트에서 검색 조건을 선택했다고 해보겠습니다.

페이지를 이동하면서도 해당 조건을 잠시 유지하고 싶다면 Session Storage에 저장할 수 있습니다.

sessionStorage.setItem("searchType", "football");

이렇게 저장한 값은 다음과 같이 가져올 수 있습니다.

const searchType = sessionStorage.getItem("searchType");

console.log(searchType);

콘솔에 football이 출력됩니다.

값을 삭제하고 싶다면 다음과 같이 사용할 수 있습니다.

sessionStorage.removeItem("searchType");

Session Storage에 들어 있는 값을 모두 삭제하려면 다음 코드를 사용할 수 있습니다.

sessionStorage.clear();

생각보다 사용법은 간단합니다.

개발자 도구에서 Session Storage 확인하기

Session Storage를 직접 확인하는 방법도 어렵지 않습니다.

크롬 브라우저에서 원하는 웹사이트를 열고 F12를 누르거나 마우스 오른쪽 버튼을 클릭한 다음 검사를 선택합니다.

그러면 Chrome 개발자 도구가 열립니다.

상단 메뉴에서 Application 탭을 찾아 들어갑니다.

왼쪽 메뉴를 보면 Storage라는 영역이 있고 그 안에 Session Storage가 있습니다.

Session Storage를 펼치면 현재 사이트에서 저장하고 있는 데이터를 확인할 수 있습니다.

보통 다음과 같은 형태로 데이터가 표시됩니다.

Session Storage
 └─ https://example.com
     ├─ searchType    football
     ├─ page          2
     └─ filter        latest

여기서 Key와 Value를 직접 확인할 수 있습니다.

개발 중에 “분명 데이터를 저장했는데 왜 값이 안 나오지?”라는 문제가 발생했다면 이 화면을 먼저 확인해보는 것도 좋은 방법입니다.

코드만 계속 들여다보는 것보다 실제 브라우저에 어떤 값이 들어가 있는지 확인하면 문제를 훨씬 빠르게 찾을 수 있습니다.

Local Storage와 무엇이 다를까?

Session Storage를 이해하려면 Local Storage와 비교해보는 것이 가장 쉽습니다.

둘 다 브라우저에 데이터를 저장한다는 점은 비슷합니다.

하지만 데이터를 얼마나 오래 유지하느냐에서 차이가 있습니다.

Local Storage는 브라우저를 종료했다가 다시 실행해도 데이터가 남아 있을 수 있습니다.

반면 Session Storage는 일반적으로 해당 브라우징 세션이 종료되면 데이터가 사라집니다.

예를 들어 쇼핑몰에서 사용자가 임시로 선택한 검색 조건이나 특정 페이지에서만 필요한 상태값이라면 Session Storage를 사용하는 것이 자연스러울 수 있습니다.

반대로 사용자가 다시 방문했을 때도 유지해야 하는 설정값이라면 Local Storage가 더 적합할 수 있습니다.

간단하게 정리하면 다음과 같습니다.

구분	Local Storage	Session Storage
데이터 저장 위치	브라우저	브라우저
유지 기간	비교적 지속적	세션 동안
브라우저 종료	데이터가 남을 수 있음	일반적으로 삭제
주요 용도	장기적인 설정값	임시 상태값
개발자 도구	Application에서 확인	Application에서 확인

다만 여기서 한 가지 주의할 점이 있습니다.

Session Storage는 단순히 “페이지를 새로고침하면 무조건 삭제되는 저장소”가 아닙니다.

페이지를 새로고침하거나 같은 탭에서 다른 페이지로 이동하더라도 세션이 유지되는 동안에는 저장된 값을 사용할 수 있습니다.

따라서 실제 동작을 확인할 때는 새로고침, 페이지 이동, 새 탭, 탭 종료, 브라우저 종료를 각각 테스트해보는 것이 좋습니다.

Session Storage에는 어떤 데이터를 저장할까?

Session Storage는 모든 데이터를 저장하기 위한 공간은 아닙니다.

주로 현재 사용자의 브라우징 과정에서 잠시 필요한 데이터를 저장하는 데 적합합니다.

예를 들어 검색 페이지에서 사용자가 선택한 필터를 유지할 수 있습니다.

sessionStorage.setItem("category", "sports");
sessionStorage.setItem("page", "2");

다른 페이지로 이동했다가 다시 돌아왔을 때 이 값을 읽어서 이전 화면의 상태를 복원할 수도 있습니다.

또한 여러 단계로 진행되는 입력 화면에서도 활용할 수 있습니다.

예를 들어 회원가입이나 설문조사처럼 한 번에 모든 정보를 입력하지 않고 여러 화면으로 나누어 입력하는 경우가 있습니다.

각 단계에서 임시 상태를 저장해두면 사용자가 화면을 이동하더라도 일부 데이터를 유지할 수 있습니다.

물론 중요한 개인정보나 민감한 인증 정보를 아무 생각 없이 Session Storage에 저장하는 것은 피해야 합니다.

브라우저에서 사용자가 접근할 수 있는 저장소라는 점을 항상 기억해야 합니다.

개발자 도구에서 직접 값을 수정해보기

Session Storage의 재미있는 부분 중 하나는 개발자 도구에서 저장된 값을 직접 확인하고 수정할 수 있다는 것입니다.

Application → Session Storage로 들어가면 저장된 Key와 Value가 표 형태로 표시됩니다.

여기서 Value를 직접 변경해볼 수 있습니다.

예를 들어

page = 2

라는 값이 있다면 개발자 도구에서 이를

page = 10

으로 변경할 수 있습니다.

이후 웹페이지를 다시 확인하면 애플리케이션이 해당 값을 어떻게 처리하는지 테스트할 수 있습니다.

프론트엔드 개발을 하다 보면 특정 조건에서 화면이 어떻게 동작하는지 확인해야 할 때가 있는데, 이런 방식으로 테스트 데이터를 빠르게 변경할 수 있습니다.

다만 실제 서비스에서는 사용자가 개발자 도구를 통해 저장된 값을 변경할 수 있다는 점을 고려해야 합니다.

따라서 Session Storage에 들어 있는 값을 서버에서 검증 없이 신뢰해서는 안 됩니다.

Session Storage를 사용할 때 주의할 점

Session Storage는 편리하지만 몇 가지 주의해야 할 부분이 있습니다.

먼저 저장되는 값은 기본적으로 문자열이라는 점입니다.

숫자를 저장하더라도 다시 가져오면 문자열로 반환될 수 있습니다.

sessionStorage.setItem("count", 10);

const count = sessionStorage.getItem("count");

console.log(typeof count);

이 경우 number가 아니라 string으로 확인될 수 있습니다.

객체나 배열을 저장하려면 JSON으로 변환하는 과정이 필요합니다.

const user = {
    name: "홍길동",
    age: 30
};

sessionStorage.setItem("user", JSON.stringify(user));

가져올 때는 다시 객체로 변환합니다.

const userData = JSON.parse(
    sessionStorage.getItem("user")
);

console.log(userData.name);

또 하나 중요한 부분은 저장 용량과 보안입니다.

Session Storage는 데이터베이스처럼 대량의 데이터를 저장하기 위한 기능이 아닙니다.

그리고 비밀번호나 중요한 인증정보처럼 보안상 민감한 데이터를 단순히 저장하는 용도로 사용해서도 안 됩니다.

마무리

Session Storage는 처음 보면 Local Storage와 크게 다르지 않아 보입니다.

실제로 API 사용 방법도 거의 비슷합니다.

하지만 개발을 하다 보면 이 둘의 차이가 꽤 중요해집니다.

“이 데이터가 브라우저를 다시 열어도 필요한가?”

“아니면 지금 사용자가 페이지를 이용하는 동안에만 필요한가?”

이 기준으로 생각해보면 어떤 저장 방식을 선택해야 할지 훨씬 쉽게 판단할 수 있습니다.

그리고 문제가 발생했을 때는 개발자 도구의 Application → Session Storage를 직접 열어보는 습관을 들이는 것도 좋습니다.

코드에서는 분명 setItem()을 호출했는데 화면에서 값이 제대로 나오지 않는다면 실제 저장된 Key와 Value가 무엇인지부터 확인해보세요.

웹 개발을 하면서 개발자 도구를 자주 사용하다 보면 Console이나 Network 탭뿐만 아니라 Application 탭도 상당히 유용한 도구라는 것을 알게 됩니다.

특히 Local Storage와 Session Storage를 함께 이해해두면 브라우저에서 데이터를 관리하는 기본적인 구조를 파악하는 데도 도움이 됩니다.