자바스크립트 실무 유틸 함수 시리즈 19 - 로컬 스토리지 / 세션 스토리지를 위한 유틸

이번 19편에서는 웹 애플리케이션에서 클라이언트 측 데이터를 저장하는 데 사용되는 localStorage와 sessionStorage를 보다 안전하고 효율적으로 다룰 수 있는 유틸 함수들을 정리합니다.

---

✅ 1. setStorage (데이터 저장)

📌 localStorage 또는 sessionStorage에 문자열 또는 객체 저장

function setStorage(type, key, value) {
  const storage = type === 'session' ? sessionStorage : localStorage;
  const data = typeof value === 'object' ? JSON.stringify(value) : value;
  storage.setItem(key, data);
}

📌 활용 예시

(예: 사용자 설정값을 로컬에 저장)

setStorage('local', 'theme', { darkMode: true });

---

✅ 2. getStorage (데이터 불러오기)

📌 저장된 값을 파싱하여 반환

function getStorage(type, key) {
  const storage = type === 'session' ? sessionStorage : localStorage;
  const data = storage.getItem(key);
  try {
    return JSON.parse(data);
  } catch {
    return data;
  }
}

📌 활용 예시

(예: 테마 설정 불러오기)

const theme = getStorage('local', 'theme');

---

✅ 3. removeStorage (데이터 삭제)

📌 해당 키의 항목 삭제

function removeStorage(type, key) {
  const storage = type === 'session' ? sessionStorage : localStorage;
  storage.removeItem(key);
}

📌 활용 예시

(예: 로그아웃 시 사용자 정보 삭제)

removeStorage('local', 'userToken');

---

✅ 4. clearStorage (전체 초기화)

📌 저장소 전체 비우기

function clearStorage(type) {
  const storage = type === 'session' ? sessionStorage : localStorage;
  storage.clear();
}

📌 활용 예시

(예: 관리자 모드에서 전체 캐시 삭제)

clearStorage('local');

---

✅ 5. hasStorageKey (해당 키 존재 여부 확인)

📌 특정 키 존재 여부 체크

function hasStorageKey(type, key) {
  const storage = type === 'session' ? sessionStorage : localStorage;
  return storage.getItem(key) !== null;
}

📌 활용 예시

(예: 저장된 사용자 인증 토큰 확인)

if (hasStorageKey('local', 'userToken')) {
  redirectToDashboard();
}

---

✅ 결론

브라우저 저장소는 사용자 경험을 개선하고 상태 유지를 가능하게 하는 중요한 수단입니다. 위에서 소개한 유틸 함수들은 localStorage와 sessionStorage를 안정적으로 다루는 데 실질적인 도움을 줄 수 있습니다.