AI랑 같이하는 코딩

1. 저장했는데 왜 사라질까

localStorage는 브라우저에 데이터를 저장하므로, 원칙적으로 새로고침해도 값이 유지되어야 합니다. 그런데 실제 개발에서는 "분명 저장했는데 리로드하면 초기화"되는 일이 자주 발생합니다. 이때 localStorage가 고장 난 것이 아니라, 저장과 불러오기 흐름 중 하나가 깨진 경우가 대부분입니다.

특히 초보 단계에서 흔한 실수는 저장 직후 화면에는 반영되지만, 페이지 시작 시 다시 읽어오는 코드가 없거나 잘못된 키를 쓰는 경우입니다. 또 다른 원인은 개발 중 초기화 코드가 매번 실행되어 저장값을 덮어쓰는 상황입니다. 핵심은 저장(set)과 복원(get) 흐름을 한 세트로 점검하는 것입니다.

2. 먼저 확인할 핵심 원인

아래 항목은 localStorage 데이터 유실처럼 보일 때 가장 자주 발견되는 원인입니다.

3. 단계별 해결 방법

1) 개발자도구 Application 탭에서 실제 저장 여부 확인

먼저 "정말 저장이 되었는지"를 확인하세요. 추측 대신 브라우저의 Application(또는 Storage) 탭에서 localStorage 항목을 직접 확인하면 됩니다. 키와 값이 없다면 저장 로직 문제이고, 값이 있는데 화면에 안 나오면 복원 로직 문제입니다.

2) 저장/조회 키를 상수로 통일

예를 들어 setItem('todoItems', ...)로 저장하고 getItem('todos')로 불러오면 항상 null이 나옵니다. 이런 오류를 막으려면 const STORAGE_KEY = 'todoItems'; 같은 상수를 만들어 한 곳에서만 관리하세요. 작은 습관이지만 유지보수 효과가 큽니다.

3) 로드 시점 복원 코드를 먼저 실행

앱이 시작될 때 localStorage 값을 읽어 상태를 복원하는 코드가 있어야 새로고침 후에도 이전 데이터가 보입니다. 저장 버튼 로직만 있고 초기 렌더 복원이 없으면 "저장은 되는데 사라지는 것처럼 보이는" 문제가 생깁니다. 렌더 전 복원 흐름을 먼저 실행하도록 구조를 잡으세요.

4) 초기값 재저장 버그 제거

코드 어딘가에서 localStorage.setItem(STORAGE_KEY, '[]') 같은 초기화가 매번 실행되면 기존 데이터가 지워집니다. 초기화는 "값이 없을 때만" 하도록 조건문을 넣어야 합니다. 즉, if (localStorage.getItem(STORAGE_KEY) === null) { ... } 패턴으로 제한하는 것이 안전합니다.

4. 안정적으로 유지하는 패턴

첫째, 스토리지 키를 상수로 분리하세요. 둘째, 저장/불러오기 유틸 함수를 만들어 JSON 처리 실수를 줄이세요. 셋째, 앱 시작 시 복원 함수 → 렌더 함수 순서로 고정하세요. 이 세 가지 패턴만 지켜도 localStorage 관련 오류가 크게 줄어듭니다.

또한 AI에게 디버깅을 요청할 때는 저장 코드, 로드 코드, 실제 localStorage 스크린샷(키/값), 실행 환경(도메인/포트)을 함께 전달하면 해결 속도가 훨씬 빨라집니다. 결국 핵심은 저장 성공 확인 + 키 일관성 + 초기화 조건 제어입니다.

5. 자주 묻는 질문