자바스크립트에서 세션 스토리지(SessionStoreage)를 사용하는 방법

by

웹 개발에서 사용자 경험을 최적화하고, 더 나은 기능을 제공하기 위해 데이터를 클라이언트 측에 저장하고 관리하는 것이 중요합니다. 해당 작업을 위해서 이용하는 여러가지 도구를 중 하나인 세션 스토리지(Session Storage)는 웹 애플리케이션이 사용자 데이터를 세션 동안 유지할 수 있도록 하는 브라우저의 내장 기능입니다. 이번 글에서 세션 스토리지의 개념, 특징, 그리고 자바스크립트에서 이를 관리하는 방법을 상세히 다루어보겠습니다.


세션 스토리지의 개념

특정 세션 동안 데이터의 데이터를 생성한 프로그램이 종료되어도 사라지지 않는 데이터의 특성을 말합니다.여기서 세션이란 사용자가 웹 페이지를 열고 닫는 동안의 시간 동안 데이터를 저장을 의미합니다. 세션 스토리지에 저장된 데이터는 탭이나 브라우저 창이 닫히면 자동으로 삭제됩니다.

이는 로컬 스토리지(Local Storage)와의 중요한 차이점입니다. 로컬 스토리지는 브라우저가 닫히더라도 데이터를 유지하지만, 세션 스토리지는 그렇지 않습니다.

세션 스토리지는 주로 다음과 같은 상황에서 유용하게 사용됩니다:

  1. 사용자 세션 관리: 사용자가 페이지를 탐색하는 동안 일정한 상태를 유지해야 할 때 사용됩니다.
  2. 일시적인 데이터 저장: 일시적으로 필요한 데이터를 세션 동안만 저장하고, 세션이 끝나면 데이터를 삭제하고자 할 때 사용됩니다.
  3. 성능 최적화: 자주 사용되는 데이터를 서버에 계속 요청하는 대신, 세션 스토리지에 저장해두고 필요할 때마다 로드함으로써 성능을 최적화할 수 있습니다.


세션 스토리지의 주요 특징

세션 스토리지는 다음과 같은 주요 특징을 가지고 있습니다:

  • 클라이언트 측 저장소: 데이터는 클라이언트(사용자)의 브라우저에 저장되며, 서버에는 전송되지 않습니다.
  • 세션 범위의 데이터 유지: 세션이 종료될 때 데이터는 삭제됩니다. 따라서 민감한 정보를 저장하기에 적합하지 않습니다.
  • 브라우저 탭 간 데이터 격리: 각 브라우저 탭은 독립적인 세션 스토리지를 가지므로, 한 탭에서 저장된 데이터는 다른 탭에서 접근할 수 없습니다.
  • 키-값 저장 구조: 세션 스토리지는 키-값 쌍으로 데이터를 저장합니다. 값은 문자열 형식으로 저장되므로, 객체나 배열과 같은 복잡한 데이터 구조를 저장할 때는 JSON 형태로 변환해야 합니다.


자바스크립트를 활용한 세션 스토리지 관리

세션 스토리지는 자바스크립트이용하여 쉽게 이용할 수 있습니다. 자바스크립트의 sessionStorage 객체를 사용하여 데이터를 저장, 조회, 삭제하는 방법을 살펴보겠습니다.

1. 데이터 저장

데이터를 세션 스토리지에 저장하기 위해서는 sessionStorage.setItem() 메서드를 사용합니다. 이 메서드는 두 개의 매개변수를 필요로 합니다. 첫 번째는 저장할 데이터의 키, 두 번째는 해당 키에 매핑될 값입니다.

sessionStorage.setItem('username', 'CodeDiary');

위 코드는 'username'이라는 키로 'CodeDiary'라는 값을 세션 스토리지에 저장합니다. 이 데이터는 현재 세션 동안만 유지됩니다.

2. 데이터 조회

저장된 데이터를 조회하기 위해서는 sessionStorage.getItem() 메서드를 사용합니다. 이 메서드는 저장된 데이터의 키를 인수로 받아 해당 키에 매핑된 값을 반환합니다.

let username = sessionStorage.getItem('username');
console.log(username);  // 출력: CodeDiary

해당 키로 저장된 데이터가 없다면 null을 반환합니다.

3. 데이터 삭제

세션 스토리지에서 특정 데이터를 삭제하려면 sessionStorage.removeItem() 메서드를 사용합니다. 삭제하고자 하는 데이터의 키를 인수로 전달하면 됩니다.

sessionStorage.removeItem('username');

위 코드를 실행하면 'username' 키에 해당하는 데이터가 세션 스토리지에서 삭제됩니다.

4. 전체 데이터 삭제

세션 스토리지의 모든 데이터를 삭제하려면 sessionStorage.clear() 메서드를 사용합니다. 이 메서드는 세션 스토리지에 저장된 모든 데이터를 제거합니다.

sessionStorage.clear();

이렇게 하면 현재 세션에 저장된 모든 데이터가 제거됩니다.

5. 객체 데이터 저장과 조회

세션 스토리지는 문자열 형식의 데이터만 저장할 수 있기 때문에, 객체나 배열과 같은 데이터를 저장하려면 JSON.stringify() 메서드를 사용하여 문자열로 변환한 후 저장해야 합니다. 조회할 때는 JSON.parse() 메서드를 사용하여 원래의 객체로 변환할 수 있습니다.

let user = { name: 'Code', age: 30 };
sessionStorage.setItem('user', JSON.stringify(user));

// 조회 시
let storedUser = JSON.parse(sessionStorage.getItem('user'));
console.log(storedUser.name);  // 출력: Code


세션 스토리지 활용 시 주의사항

세션 스토리지를 사용할 때는 몇 가지 주의사항이 있습니다.

민감한 정보를 저장하지 않는 것이 좋습니다. 세션 스토리지는 클라이언트 측에 저장되기 때문에 보안에 취약할 수 있습니다. 또한, 세션 스토리지는 브라우저별로 저장되므로, 사용자가 다른 브라우저나 기기를 사용하면 동일한 데이터에 접근할 수 없습니다.

또한, 세션 스토리지는 크기 제한이 있습니다. 일반적으로 브라우저마다 다르지만, 대부분의 브라우저에서 약 5MB 정도의 저장 용량을 제공합니다. 따라서 많은 양의 데이터를 저장해야 할 경우에는 서버 측 데이터베이스나 로컬 스토리지 등 다른 방법을 고려해야 합니다.

Leave a Comment