로컬 스토리지의 역할과 사용 예시

로컬 스토리지는 웹 브라우저가 데이터를 사용자 컴퓨터에 저장할 수 있게 해주는 기능입니다. 로컬 스토리지에 저장된 데이터는 브라우저를 닫았다가 다시 열어도 유지됩니다.

로컬 스토리지의 역할

1. 데이터 저장: 로컬 스토리지는 사용자가 특정 웹 애플리케이션을 사용하는 동안 데이터를 저장할 수 있는 방법을 제공합니다.
2. 데이터 유지: 데이터를 지속적으로 유지할 수 있어, 사용자가 브라우저를 닫았다가 다시 열어도 데이터가 사라지지 않습니다.
3. 빠른 접근: 로컬 스토리지에 저장된 데이터는 로컬에 있으므로 접근 속도가 빠릅니다.

장점

1. 지속성: 데이터를 브라우저 세션 간에 유지할 수 있습니다.
2. 간편함: 데이터 저장과 읽기가 매우 간단하고 직관적입니다.
3. 빠른 접근: 서버 요청 없이 빠르게 데이터를 읽고 쓸 수 있습니다.
4. 대용량 저장 가능: 일반적으로 약 5MB까지 저장할 수 있어 쿠키보다 많은 데이터를 저장할 수 있습니다.

단점

1. 보안: 로컬 스토리지에 저장된 데이터는 클라이언트 측에 저장되므로 민감한 정보를 저장하기에는 안전하지 않습니다.
2. 동기화 문제: 다른 기기나 브라우저 간에 데이터를 동기화할 수 없습니다.
3. 용량 제한: 로컬 스토리지에는 약 5MB의 저장 용량 제한이 있습니다.
4. 브라우저 지원: 모든 최신 브라우저에서 지원되지만, 오래된 브라우저에서는 지원하지 않을 수 있습니다.

사용 예시

1. 사용자 설정 저장: 테마 설정, 언어 설정 등 사용자가 변경할 수 있는 개인 설정을 저장합니다.
   • 예: 다크 모드 설정, 사용자가 선택한 언어.
2. 폼 데이터 저장: 사용자가 작성 중인 폼 데이터를 저장하여 브라우저를 새로 고침해도 데이터가 유지되도록 합니다.
   • 예: 회원가입 폼의 중간 저장.
3. 장바구니 기능: 전자 상거래 웹사이트에서 사용자가 선택한 장바구니 항목을 저장합니다.
   • 예: 사용자가 선택한 제품 목록.
4. 게임 상태 저장: 웹 기반 게임에서 게임의 진행 상태를 저장합니다.
   • 예: 게임 레벨, 점수, 진행 상태.
5. 임시 데이터 저장: 서버에 저장할 필요는 없지만, 사용자가 세션 동안 유지해야 하는 데이터를 저장합니다.
   • 예: 검색 결과 필터 설정.

사용 예시 코드

import { useState, useEffect } from 'react';

const ThemeSwitcher = () => {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };

  return (
    <div className={theme}>
      <button onClick={toggleTheme}>
        {theme === 'light' ? 'Switch to Dark Mode' : 'Switch to Light Mode'}
      </button>
    </div>
  );
};

export default ThemeSwitcher;

이 예시에서는 사용자가 클릭할 때마다 테마를 전환하고, 현재 테마를 로컬 스토리지에 저장합니다. 페이지를 새로 고침해도 선택한 테마가 유지됩니다.