시스매

웹 개발자 필독 세션 스토리지 완벽 정복 핸드북

19 min read

2025-09-11 23:31

  • 세션 스토리지는 웹 브라우저 탭이나 창이 살아있는 동안에만 데이터를 저장하는 임시 저장소입니다.

  • 데이터는 ‘키-값’ 쌍의 문자열 형태로 저장되며, 같은 사이트라도 다른 탭끼리는 데이터가 공유되지 않습니다.

  • 로그인 정보, 장바구니 등 ‘한 번의 방문’ 동안만 유지되면 되는 일시적인 데이터를 다룰 때 가장 유용합니다.

웹 개발자 필독 세션 스토리지 완벽 정복 핸드북

웹 개발 환경은 사용자의 경험을 향상시키기 위해 끊임없이 발전해왔습니다. 그 중심에는 ‘상태’를 어떻게 관리할 것인가에 대한 고민이 있습니다. 사용자가 페이지를 새로고침하거나 다른 페이지로 이동했을 때, 방금 입력했던 정보나 선택했던 옵션이 사라진다면 굉장히 불편할 것입니다. 이러한 문제를 해결하기 위해 등장한 기술 중 하나가 바로 **세션 스토리지(Session Storage)**입니다.

이 핸드북에서는 세션 스토리지가 왜 만들어졌는지, 어떤 구조를 가지고 있으며 어떻게 사용하는지, 그리고 다른 데이터 저장 기술과는 무엇이 다른지 A부터 Z까지 상세하게 파헤쳐 봅니다.

1. 세션 스토리지의 탄생 배경과 존재 이유

초기 웹의 기반이 되는 HTTP 프로토콜은 근본적으로 ‘상태가 없는(Stateless)’ 특성을 가집니다. 이는 서버가 클라이언트의 이전 요청을 기억하지 못한다는 의미입니다. A 페이지에서 B 페이지로 이동하면, 서버는 B 페이지를 요청한 사용자가 방금 A 페이지에 있던 그 사용자인지 알 방법이 없습니다.

이러한 한계를 극복하기 위해 ‘쿠키(Cookie)‘가 등장했지만, 쿠키는 몇 가지 단점을 가지고 있었습니다.

  • 작은 용량: 약 4KB로 저장할 수 있는 데이터의 양이 매우 적다.

  • 서버 트래픽 증가: 모든 HTTP 요청에 쿠키 정보가 포함되어 서버로 전송되므로, 불필요한 트래픽을 유발한다.

  • 보안 취약점: 보안에 신경 써서 관리하지 않으면 정보가 노출될 위험이 있다.

이러한 문제들을 해결하고, 더 나은 클라이언트 측 데이터 저장 방식을 제공하기 위해 HTML5 표준의 일부로 **웹 스토리지 API(Web Storage API)**가 등장했습니다. 그리고 이 API는 두 가지 저장소 객체를 제공하는데, 그것이 바로 **세션 스토리지(Session Storage)**와 **로컬 스토리지(Local Storage)**입니다.

세션 스토리지는 그 이름에서 알 수 있듯이, **‘단 하나의 세션’**을 위한 데이터 저장소입니다. 사용자가 웹사이트에 들어와서 여러 페이지를 둘러보다가 브라우저 탭이나 창을 닫는 그 순간까지, 즉 ‘한 번의 방문’ 동안만 데이터를 유지할 필요가 있을 때를 위해 탄생했습니다.

2. 핵심 개념과 구조

세션 스토리지를 제대로 이해하기 위해서는 몇 가지 핵심적인 특징을 알아야 합니다.

‘세션’의 범위는 어디까지인가?

세션 스토리지에서 말하는 ‘세션’은 브라우저의 탭 또는 창 하나의 생명주기와 같습니다.

  • 생성: 페이지가 새로운 탭이나 창에서 열릴 때, 해당 탭을 위한 고유한 세션 스토리지가 생성됩니다.

  • 유지: 사용자가 그 탭 안에서 페이지를 새로고침하거나, 링크를 통해 다른 페이지로 이동해도 데이터는 그대로 유지됩니다.

  • 소멸: 사용자가 브라우저 탭이나 창을 닫으면 그 즉시 세션 스토리지에 저장된 모든 데이터는 영구적으로 삭제됩니다.

비유로 이해하기: 세션 스토리지는 카페에서 잠시 사용하는 ‘사물함’과 같습니다. 카페에 머무는 동안(탭이 열려있는 동안)에는 자유롭게 물건을 넣고 뺄 수 있지만, 카페를 나가는 순간(탭을 닫는 순간) 사물함은 비워지고 다른 사람이 사용하게 됩니다.

데이터 저장 방식: 키-값 저장소 (Key-Value Store)

세션 스토리지는 데이터를 키(Key)와 값(Value)이 하나의 쌍으로 이루어진 형태로 저장합니다.

  • 키(Key): 데이터를 식별하기 위한 고유한 이름입니다.

  • 값(Value): 해당 키에 저장될 실제 데이터입니다.

매우 중요한 점은 키와 값 모두 반드시 문자열(String) 형태로 저장된다는 것입니다. 만약 숫자, 배열, 객체 등 다른 타입의 데이터를 저장하려고 하면, 해당 데이터는 자동으로 문자열로 변환됩니다. 이 때문에 복잡한 데이터를 다룰 때는 특별한 처리가 필요합니다. (사용법 섹션에서 자세히 설명)

데이터 격리: 탭/창별로 독립적

세션 스토리지는 데이터가 탭 또는 창별로 완전히 격리됩니다. 예를 들어, 사용자가 example.com 사이트를 두 개의 다른 탭에서 열었다고 가정해 봅시다.

  • 탭 1의 세션 스토리지에 저장한 데이터는 탭 2에서 접근할 수 없습니다.

  • 반대로 탭 2의 데이터 역시 탭 1에서는 보이지 않습니다.

이는 각 탭이 자신만의 독립적인 ‘임시 사물함’을 갖는 것과 같습니다. 이 특징 덕분에 여러 탭에서 같은 웹사이트를 사용하더라도 서로의 작업에 영향을 주지 않고 독립적인 상태를 유지할 수 있습니다.

저장 용량

세션 스토리지는 쿠키보다 훨씬 넉넉한 저장 공간을 제공합니다. 브라우저마다 약간의 차이는 있지만, 일반적으로 하나의 출처(Origin) 당 약 5MB의 데이터를 저장할 수 있습니다. 이는 간단한 텍스트 데이터나 사용자 설정 등을 저장하기에 충분한 크기입니다.

3. 사용법: 간단하고 명료한 API

세션 스토리지는 window.sessionStorage 객체를 통해 접근할 수 있으며, 매우 직관적인 메소드를 제공합니다.

메소드설명사용 예시
setItem(key, value)키와 값을 받아 데이터를 저장합니다.sessionStorage.setItem('username', 'Alice');
getItem(key)키를 받아 해당 키에 저장된 값을 반환합니다. 값이 없으면 null을 반환합니다.let user = sessionStorage.getItem('username');
removeItem(key)키를 받아 해당 키의 데이터를 삭제합니다.sessionStorage.removeItem('username');
clear()해당 출처의 세션 스토리지에 저장된 모든 데이터를 삭제합니다.sessionStorage.clear();
key(index)정수 인덱스(0부터 시작)를 받아 해당 위치의 키 이름을 반환합니다.let firstKey = sessionStorage.key(0);
length저장된 데이터 항목의 개수를 반환하는 속성입니다.let count = sessionStorage.length;

객체나 배열 저장하기: JSON 활용

앞서 언급했듯이 세션 스토리지는 문자열만 저장할 수 있습니다. 만약 자바스크립트 객체나 배열을 저장해야 한다면 어떻게 해야 할까요? 바로 **JSON(JavaScript Object Notation)**을 활용하면 됩니다.

  1. 저장할 때: JSON.stringify()를 사용해 객체나 배열을 JSON 문자열로 변환하여 저장합니다.

  2. 불러올 때: JSON.parse()를 사용해 불러온 JSON 문자열을 다시 원래의 객체나 배열로 변환합니다.

// 사용자 정보 객체
const userInfo = {
  id: 'user123',
  name: 'Bob',
  preferences: ['dark-mode', 'email-alerts']
};
 
// 1. 객체를 JSON 문자열로 변환하여 저장
sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
 
// 2. 저장된 문자열을 불러와 JSON 객체로 파싱
const savedUserInfo = JSON.parse(sessionStorage.getItem('userInfo'));
 
console.log(savedUserInfo.name); // "Bob"
console.log(savedUserInfo.preferences); // ['dark-mode', 'email-alerts']

이 방법을 사용하면 복잡한 데이터 구조도 손쉽게 세션 스토리지에 저장하고 사용할 수 있습니다.

4. 다른 스토리지와의 비교

웹 개발에서 사용할 수 있는 클라이언트 측 저장소는 세션 스토리지만 있는 것이 아닙니다. 로컬 스토리지, 쿠키와는 어떤 차이점이 있는지 명확히 이해하고 상황에 맞는 기술을 선택하는 것이 중요합니다.

구분세션 스토리지 (Session Storage)로컬 스토리지 (Local Storage)쿠키 (Cookies)
데이터 수명브라우저 탭/창을 닫으면 삭제됨사용자가 직접 삭제하지 않는 한 영구적으로 유지됨설정된 만료일(expires)에 따라 삭제됨
데이터 범위탭/창별로 독립적 (같은 출처라도 탭이 다르면 공유 안 됨)출처(Origin) 단위로 공유 (같은 출처의 모든 탭/창에서 공유)출처 단위로 공유 (같은 출처의 모든 탭/창에서 공유)
저장 용량약 5MB약 5MB약 4KB
서버 전송서버로 전송되지 않음서버로 전송되지 않음모든 HTTP 요청에 자동으로 포함되어 서버로 전송됨
주요 사용 사례- 일회성 폼 데이터 임시 저장
- 한 세션 동안의 사용자 활동 기록
- 비로그인 사용자의 임시 장바구니		- 자동 로그인 정보
- 사용자의 UI 설정(테마 등)
- 오프라인 웹 앱 데이터		- 사용자 인증 상태 관리(세션 ID)
- 서버가 클라이언트를 식별해야 할 때

5. 주요 활용 사례

세션 스토리지의 특성을 이해했다면, 어떤 상황에서 유용하게 사용할 수 있을지 알아보겠습니다.

  • 다단계 입력 폼: 여러 페이지에 걸쳐 정보를 입력받는 폼에서, 사용자가 이전 단계로 돌아가거나 페이지를 새로고침해도 입력했던 내용이 사라지지 않도록 임시 저장하는 용도로 적합합니다. 탭을 닫으면 정보가 사라지므로 보안에도 유리합니다.

  • 비로그인 사용자의 장바구니: 사용자가 로그인하지 않은 상태에서 장바구니에 상품을 담을 때, 세션 스토리지에 상품 정보를 저장할 수 있습니다. 사용자가 사이트를 떠나면(탭을 닫으면) 장바구니 정보는 자동으로 비워집니다.

  • 일회성 알림/팝업 제어: “오늘 하루 이 창을 보지 않기”와 같은 기능은 로컬 스토리지가 적합하지만, “이번 방문 동안 이 팝업을 다시 보지 않기”와 같이 현재 세션에만 국한된 알림을 제어할 때 세션 스토리지를 사용할 수 있습니다.

  • 웹 애플리케이션의 일시적 상태: 페이지를 이동하더라도 유지되어야 하는 특정 UI 상태(예: 스크롤 위치, 선택된 탭 등)를 세션 동안만 저장하여 사용자 경험을 부드럽게 만들 수 있습니다.

6. 심화 내용 및 주의사항

보안 고려사항

세션 스토리지는 클라이언트에 저장되므로, 서버 측 저장소만큼 안전하지 않습니다. 특히 XSS(Cross-Site Scripting) 공격에 취약합니다. 만약 악의적인 스크립트가 웹 페이지에 삽입될 수 있다면, 해당 스크립트는 세션 스토리지에 접근하여 데이터를 읽거나 조작할 수 있습니다.

따라서 비밀번호, 개인 식별 정보, 인증 토큰 등 민감한 데이터는 절대로 세션 스토리지에 저장해서는 안 됩니다.

성능

세션 스토리지 API는 **동기적(Synchronous)**으로 작동합니다. 즉, setItem이나 getItem과 같은 메소드가 실행되는 동안 브라우저의 다른 작업(특히 렌더링)이 잠시 멈출 수 있습니다. 하지만 저장되는 데이터의 크기가 작고 작업이 단순하기 때문에, 일반적인 사용 환경에서 성능에 미치는 영향은 거의 무시할 수 있는 수준입니다.

브라우저 호환성

세션 스토리지는 Internet Explorer 8 이상을 포함한 모든 최신 브라우저에서 완벽하게 지원됩니다. 따라서 호환성 걱정 없이 대부분의 프로젝트에서 안심하고 사용할 수 있습니다.

디버깅 방법

대부분의 최신 웹 브라우저는 개발자 도구를 통해 세션 스토리지를 쉽게 확인하고 관리할 수 있는 기능을 제공합니다.

  • Chrome 브라우저 기준: 개발자 도구(F12) > Application 탭 > Storage 섹션 > Session Storage 경로로 이동하면 현재 사이트의 세션 스토리지에 저장된 키와 값을 실시간으로 확인, 수정, 삭제할 수 있습니다.

7. 결론

세션 스토리지는 ‘한 번의 방문’이라는 명확한 생명주기를 가진 데이터를 다루기 위한 매우 효과적이고 간단한 도구입니다. 서버와의 불필요한 통신 없이 클라이언트 측에서 독립적으로 데이터를 관리할 수 있게 해주며, 쿠키의 단점을 보완하고 로컬 스토리지와는 다른 목적을 수행합니다.

그 특성을 명확히 이해하고, 데이터의 수명과 범위를 고려하여 로컬 스토리지나 쿠키와 같은 다른 기술과 함께 적재적소에 활용한다면, 더욱 견고하고 사용자 친화적인 웹 애플리케이션을 구축하는 데 큰 도움이 될 것입니다.

그래프 뷰

백링크