로컬 스토리지와 세션 스토리지

1. 도입 (왜 배워야 하는가)

웹 애플리케이션을 개발할 때, 사용자 데이터를 관리하는 방법은 매우 중요합니다. 사용자 정보나 애플리케이션 상태를 저장하기 위해 서버에 요청을 보내는 대신, 클라이언트 측에서 데이터를 저장할 수 있는 방법이 바로 로컬 스토리지와 세션 스토리지입니다. 이 두 가지는 브라우저에서 자바스크립트를 통해 사용할 수 있는 웹 스토리지 API의 일환으로, 페이지 새로고침이나 브라우저 종료 시에도 데이터를 유지할 수 있는 방법을 제공합니다.

이 토픽을 모르면, 예를 들어 사용자가 쇼핑몰에서 장바구니에 추가한 상품 정보를 잃어버리는 문제가 발생할 수 있습니다. 이러한 경험은 사용자에게 불편을 초래하고, 결과적으로는 서비스에 대한 신뢰도를 낮출 수 있습니다.

2. 핵심 개념 설명

로컬 스토리지

로컬 스토리지는 사용자의 브라우저에 데이터를 영구적으로 저장할 수 있는 방법입니다. 예를 들어, 사용자가 웹사이트를 방문한 후에도 데이터가 유지되므로, 다음에 다시 방문했을 때도 이전 상태를 그대로 유지할 수 있습니다.

세션 스토리지

세션 스토리지는 사용자의 세션이 활성화되어 있는 동안만 데이터를 저장합니다. 즉, 브라우저 탭을 닫으면 저장된 데이터가 삭제됩니다. 이는 쇼핑몰에서 장바구니 정보를 임시로 저장할 때 유용합니다.

3. 기본 코드 예제

로컬 스토리지 사용 예제

// 데이터를 로컬 스토리지에 저장
localStorage.setItem('username', '홍길동');

// 로컬 스토리지에서 데이터 가져오기
const username = localStorage.getItem('username');
console.log(username); // '홍길동' 출력

• 1행: setItem 메서드를 사용하여 'username'이라는 키로 '홍길동'이라는 값을 저장합니다.
• 3행: getItem 메서드를 사용하여 'username' 키로 저장된 값을 가져옵니다.
• 4행: 콘솔에 가져온 값을 출력합니다.

세션 스토리지 사용 예제

// 데이터를 세션 스토리지에 저장
sessionStorage.setItem('sessionId', '123456');

// 세션 스토리지에서 데이터 가져오기
const sessionId = sessionStorage.getItem('sessionId');
console.log(sessionId); // '123456' 출력

• 1행: setItem 메서드를 사용하여 'sessionId'라는 키로 '123456'라는 값을 저장합니다.
• 3행: getItem 메서드를 사용하여 'sessionId' 키로 저장된 값을 가져옵니다.
• 4행: 콘솔에 가져온 값을 출력합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰 장바구니

쇼핑몰에서 사용자가 상품을 장바구니에 추가할 때, 로컬 스토리지를 사용하여 장바구니 정보를 저장할 수 있습니다.

function addToCart(productId) {
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    cart.push(productId);
    localStorage.setItem('cart', JSON.stringify(cart));
}

// 사용 예
addToCart('상품123');

• 사용자가 장바구니에 상품을 추가할 때마다 로컬 스토리지에 현재 장바구니 상태를 업데이트합니다.

예제 2: 사용자 세션 관리

로그인한 사용자의 정보를 세션 스토리지에 저장하여, 종종 페이지 간 이동 시 사용자가 로그인 상태를 유지하도록 할 수 있습니다.

function loginUser(username) {
    sessionStorage.setItem('loggedInUser', username);
}

// 사용 예
loginUser('홍길동');

• 사용자가 로그인할 때, 세션 스토리지에 로그인 정보를 저장합니다.

5. 흔한 실수와 주의사항

실수 1: 데이터 타입을 고려하지 않기

로컬 스토리지와 세션 스토리지는 모든 데이터를 문자열로 저장합니다. 객체를 저장할 때 JSON.stringify()를 사용하지 않으면 데이터가 손실됩니다.

// 잘못된 예
localStorage.setItem('user', { name: '홍길동' }); // 오류 발생

// 올바른 예
localStorage.setItem('user', JSON.stringify({ name: '홍길동' }));

실수 2: 데이터 삭제 시 주의

세션 스토리지의 데이터는 세션이 끝나면 삭제되므로, 이를 사용하여 장기적인 데이터를 저장할 수 없습니다.

// 사용자가 로그아웃할 때 세션 스토리지 데이터를 삭제하려면
sessionStorage.removeItem('loggedInUser'); // 필요할 때만 삭제

6. 정리

• 로컬 스토리지는 데이터를 영구적으로 저장하며, 세션 스토리지는 세션 중에만 데이터를 유지합니다.
• 사용자 경험을 개선하기 위해 스토리지 API를 활용할 수 있습니다.
• 데이터 저장 시 JSON.stringify()와 JSON.parse()를 사용하여 객체를 안전하게 다루어야 합니다.

다음에 학습하면 좋은 주제는 IndexedDB로, 로컬 스토리지보다 더 복잡한 데이터 구조를 다룰 수 있는 방법입니다.