JavaScript Session Storage

Contents

JavaScript의 세션 스토리지(Session Storage)는 웹 브라우저의 세션 동안 데이터를 클라이언트 측에 저장할 수 있는 기능을 제공합니다. 이는 웹 페이지가 닫히거나 새로고침될 때까지 데이터를 유지하는 용도로 사용됩니다. 로컬 스토리지(Local Storage)와 비슷하지만, 저장된 데이터의 수명이 브라우저 세션에 한정된다는 점에서 다릅니다.

1. 세션 스토리지의 주요 특징

데이터 수명: 데이터는 현재 브라우저 탭이나 창의 세션이 종료될 때까지 유지됩니다. 탭을 닫으면 데이터가 삭제됩니다.
키-값 쌍: 세션 스토리지는 문자열 형식의 키-값 쌍으로 데이터를 저장합니다.
크기 제한: 일반적으로 도메인당 약 5MB의 저장 용량을 제공합니다.
도메인 단위: 동일한 도메인 내에서만 데이터에 접근할 수 있습니다.
탭/창 독립성: 각 브라우저 탭이나 창은 독립된 세션 스토리지 공간을 가집니다.

2. 세션 스토리지 기본 사용법

2.1 데이터 저장

sessionStorage.setItem(key, value) 메서드를 사용하여 데이터를 저장합니다. 키와 값은 모두 문자열이어야 합니다.

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

2.2 데이터 읽기

sessionStorage.getItem(key) 메서드를 사용하여 저장된 데이터를 읽습니다.

const username = sessionStorage.getItem('username');
console.log(username); // "JohnDoe"

2.3 데이터 삭제

특정 데이터를 삭제하려면 sessionStorage.removeItem(key) 메서드를 사용합니다.

sessionStorage.removeItem('username');

모든 데이터를 삭제하려면 sessionStorage.clear() 메서드를 사용합니다.

sessionStorage.clear();

2.4 데이터 업데이트

기존 데이터를 덮어쓰기 위해 동일한 키로 데이터를 다시 저장합니다.

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

3. 세션 스토리지 활용 예

3.1 객체 저장 및 읽기

세션 스토리지는 문자열만 저장할 수 있기 때문에, 객체를 저장할 때는 JSON.stringify()를 사용하고, 객체를 읽을 때는 JSON.parse()를 사용해야 합니다.

const user = {
  name: 'John Doe',
  age: 30
};

// 객체를 문자열로 변환하여 저장
sessionStorage.setItem('user', JSON.stringify(user));

// 저장된 문자열을 객체로 변환하여 읽기
const storedUser = JSON.parse(sessionStorage.getItem('user'));
console.log(storedUser.name); // "John Doe"

3.2 세션 유지

세션 스토리지를 사용하여 사용자가 페이지를 새로고침해도 세션 정보를 유지할 수 있습니다.

// 사용자가 로그인할 때
sessionStorage.setItem('isLoggedIn', 'true');

// 사용자가 페이지를 새로고침할 때
if (sessionStorage.getItem('isLoggedIn') === 'true') {
  console.log('User is still logged in');
} else {
  console.log('User is logged out');
}

// 사용자가 로그아웃할 때
sessionStorage.removeItem('isLoggedIn');

4. 세션 스토리지의 이벤트

세션 스토리지는 storage 이벤트를 발생시키지 않습니다. 이 이벤트는 로컬 스토리지에서만 사용 가능합니다.

5. 세션 스토리지의 제한 사항

크기 제한: 도메인당 약 5MB로 제한되어 있습니다.
동기적 처리: 모든 세션 스토리지 작업은 동기적으로 처리되므로 대용량 데이터 작업 시 성능 저하가 발생할 수 있습니다.
보안: 세션 스토리지는 클라이언트 측에 저장되므로 민감한 데이터를 저장하는 것은 권장되지 않습니다.
탭/창 독립성: 다른 탭이나 창에서 데이터를 공유하지 않습니다.

6. 실용적인 예제

6.1 사용자 입력 데이터 저장

사용자가 폼에 입력한 데이터를 세션 스토리지에 저장하여 페이지를 새로고침해도 입력 내용이 유지되도록 할 수 있습니다.

const form = document.getElementById('myForm');

// 폼 데이터 저장
form.addEventListener('input', function() {
  const formData = new FormData(form);
  const data = {};
  formData.forEach((value, key) => {
    data[key] = value;
  });
  sessionStorage.setItem('formData', JSON.stringify(data));
});

// 페이지 로드 시 저장된 폼 데이터 불러오기
document.addEventListener('DOMContentLoaded', function() {
  const storedData = JSON.parse(sessionStorage.getItem('formData'));
  if (storedData) {
    Object.keys(storedData).forEach(key => {
      const input = form.elements[key];
      if (input) {
        input.value = storedData[key];
      }
    });
  }
});

6.2 쇼핑 카트 데이터 저장

쇼핑 카트 데이터를 세션 스토리지에 저장하여 사용자가 브라우저 탭을 닫지 않는 한 데이터를 유지할 수 있습니다.

const cart = [];

// 아이템을 카트에 추가
function addToCart(item) {
  cart.push(item);
  sessionStorage.setItem('cart', JSON.stringify(cart));
}

// 페이지 로드 시 저장된 카트 데이터 불러오기
document.addEventListener('DOMContentLoaded', function() {
  const storedCart = JSON.parse(sessionStorage.getItem('cart'));
  if (storedCart) {
    storedCart.forEach(item => cart.push(item));
    console.log('Cart items:', cart);
  }
});

결론

세션 스토리지는 웹 애플리케이션에서 사용자 세션 동안 데이터를 유지하는 데 매우 유용한 도구입니다. 문자열 형식의 키-값 쌍으로 데이터를 저장하고, JSON을 사용하여 객체를 저장할 수 있으며, 다양한 메서드를 통해 데이터를 쉽게 조작할 수 있습니다. 다만, 보안에 주의하고, 중요한 데이터는 서버 측에 저장하는 것이 좋습니다.

Post Views: 302