localStorage 데이터가 다른 기기에서 안 보이는 이유: 주소·브라우저·저장 위치

PC에서 저장한 기록이 휴대폰에 보이지 않는다면, 먼저 앱이 데이터를 어디에 저장하는지 확인하세요. localStorage에만 저장한 기록은 웹사이트를 배포해도 다른 기기로 자동 복사되지 않습니다. 같은 주소를 여는 것과 같은 저장 공간을 사용하는 것은 다른 문제입니다.

1. 기록을 처음 저장한 브라우저·프로필과 주소에서 다시 확인합니다.
2. 개발 주소에서 공개 주소로 바뀌었는지, HTTP·HTTPS 또는 포트가 달라졌는지 비교합니다.
3. 여러 기기에서 같은 기록이 필요하면 내보내기·가져오기 또는 서버 저장 기능을 설계합니다.

원인을 확인하기 전에 브라우저의 사이트 데이터부터 지우지 마세요. 기존 기록이 남아 있는 저장 공간까지 지워질 수 있습니다.

적용 대상: 브라우저의 localStorage로 독서 기록·할 일·설정값을 저장하는 웹 앱. 서버에 데이터를 저장하는 앱에서 조회가 실패한 경우에는 로그인 상태·API 응답·사용자 권한도 별도로 확인해야 합니다.

1. localStorage의 저장 범위를 이해하기

localStorage는 브라우저에서 사용할 수 있는 키·값 저장소입니다. 같은 브라우저 환경의 같은 출처에서는 새로고침하거나 브라우저를 다시 열어도 저장한 값을 읽을 수 있습니다. 하지만 API 자체가 다른 기기의 브라우저나 서버 데이터베이스로 기록을 보내 주지는 않습니다. MDN: localStorage

여기서 출처(origin)는 프로토콜·호스트·포트의 조합입니다. 경로만 바뀌는 것은 출처 변경이 아닙니다. 예를 들어 아래 주소들은 같은 앱의 화면처럼 보여도 저장소 관점에서는 다음과 같이 나뉩니다. MDN: 출처의 정의

비교한 주소	저장 공간을 나누는 차이
http://localhost:5173 → http://localhost:5174	포트가 달라 별도 출처입니다.
http://localhost:5173 → https://reading.example.com	개발 주소와 공개 주소는 별도 출처입니다.
http://reading.example.com → https://reading.example.com	프로토콜이 달라 별도 출처입니다.
https://reading.example.com/a → https://reading.example.com/b	경로만 다르므로 같은 출처입니다.

같은 출처여도 다른 기기나 별도 브라우저 프로필은 같은 로컬 저장 공간을 사용하지 않습니다. 따라서 공개 주소의 화면이 비어 있다는 것만으로 기존 개발 주소의 기록이 삭제됐다고 판단할 수는 없습니다.

localStorage의 저장 범위와 기기 간 동기화의 차이. 저장 범위 개념도. 새로고침 후 기록이 유지되는 것과 여러 기기에서 기록을 공유하는 것은 다릅니다. 이 그림은 저장 범위를 설명한 도식이며, 실제 기기 비교 화면이 아닙니다.

2. 데이터가 없어진 것인지, 다른 곳을 보고 있는지 확인하기

먼저 기록을 저장했던 원래 주소를 원래 브라우저 프로필에서 엽니다. 그다음 개발자 도구의 저장소 화면에서 해당 출처의 Local Storage 항목을 확인합니다. 메뉴 이름은 브라우저마다 다르며, Chrome에서는 Application → Storage → Local Storage에서 볼 수 있습니다. Chrome: 로컬 저장소 확인

앱 코드에서 localStorage.setItem에 넘기는 첫 번째 값이 저장 키입니다. 예제 독서장은 namjackson-reading-note-v1을 사용합니다. 자신이 관리하는 앱이라면 다음처럼 현재 출처와 해당 키의 존재 여부를 읽어 볼 수 있습니다. 실제 앱에서는 키 이름을 맞춰야 합니다.

try {
  const key = 'namjackson-reading-note-v1';
  console.log({
    origin: location.origin,
    hasRecord: localStorage.getItem(key) !== null
  });
} catch (error) {
  console.error('저장소 접근 실패:', error.name);
}

hasRecord: false는 현재 저장 공간에 그 키가 없다는 뜻입니다. 다른 출처의 데이터 삭제 여부까지 알려 주지는 않습니다. 값이 있는데 화면만 비어 있다면 데이터 형식, JSON 파싱 오류, 화면에 읽어 오는 코드를 확인합니다. 저장 키 이름을 바꾸거나 앱 초기화 코드가 빈 배열을 덮어쓰는 경우도 분리해서 살펴봅니다.

상황	확인할 내용
로컬에서는 보이고 배포 주소에서는 안 보임	두 주소의 origin이 다른지 확인합니다. 필요한 기록은 기존 앱의 내보내기 기능 등으로 먼저 보관합니다.
PC에서는 보이고 휴대폰에서는 안 보임	서버 저장·동기화 기능이 실제로 있는지 확인합니다.
같은 주소에서 새로고침만 해도 비어 있음	저장 성공 여부, 키 변경, 읽기 오류, 초기화 코드를 확인합니다.
시크릿 창을 닫은 뒤 기록이 없어짐	시크릿 저장소의 수명과 일반 프로필의 저장 공간을 구분합니다.

localStorage에는 데이터 자체의 기본 만료 시간이 없지만 영구 보관을 보장하는 것은 아닙니다. 사용자가 사이트 데이터를 지우거나 브라우저가 저장을 제한하면 영향을 받습니다. 시크릿 모드의 저장 데이터는 마지막 시크릿 탭이 닫힐 때 정리됩니다. file://로 직접 연 파일의 동작에도 의존하지 않는 편이 좋습니다. MDN: 저장 범위와 제한

3. 작은 독서장으로 비교한 결과

책 제목과 한 줄 감상을 저장하는 HTML·JavaScript 예제로 아래를 확인했습니다. 이 데모에는 기록을 서버에 저장하는 API가 없고, 저장 버튼은 localStorage에 값을 기록합니다. Chrome 155.0.8059.85의 로컬 실행 결과입니다.

출처 A · 새로고침 후 기록 1개. 출처 A: http://127.0.0.1:62163에서 실습 기록 한 개를 저장하고 새로고침한 실제 화면입니다. 예제 도서와 감상은 설명을 위해 입력한 가상 데이터입니다.

출처 B · 다른 포트의 빈 저장소. 출처 B: 같은 브라우저에서 포트만 62167로 바꾸면 별도 출처의 빈 저장소가 보입니다. 다시 출처 A를 열었을 때 기록 1개가 남아 있었습니다. 실제 휴대폰끼리 비교한 화면은 아닙니다.

테스트 조건	화면에 보인 기록
기록 1개 저장 후 같은 출처에서 새로고침	1개 유지
같은 브라우저 환경·같은 출처의 새 탭	1개 읽기 가능
같은 주소를 격리된 브라우저 환경에서 열기	0개
같은 브라우저 환경에서 포트만 바꾸기	0개

격리된 환경은 한 컴퓨터 안에서 만든 별도 브라우저 컨텍스트입니다. 실제 휴대폰 두 대로 동기화를 시험한 결과는 아닙니다. 이 실험은 새로고침 후 유지와 저장 공간 간 분리를 확인한 것이며, 장기 보관이나 서버 동기화의 성공을 검증한 것은 아닙니다.

4. 여러 기기에서 같은 기록을 보려면

한 기기에서 잠깐 쓸 도구라면 브라우저 저장소만으로도 요구를 충족할 수 있습니다. 다른 기기로 가끔 옮기는 정도라면 기록을 JSON 파일로 내보내고 가져오는 기능을 고려할 수 있습니다. 이 방식은 수동 이동이므로 두 기기의 수정 내용이 자동으로 합쳐지지는 않습니다.

로그인한 사용자가 PC와 휴대폰에서 최신 기록을 계속 보려면, 일반적으로 서버 API와 지속 저장소를 두고 저장·조회 흐름을 연결합니다. 로그인은 사용자를 식별하는 단계일 뿐입니다. 저장 버튼이 API로 기록을 보내고, 서버가 해당 사용자의 데이터 접근 권한을 확인하며, 다른 기기가 그 기록을 다시 받아오는 기능이 함께 있어야 합니다.

설계를 시작할 때는 세 가지만 먼저 정해 보세요. 누가 어떤 기록을 읽을 수 있는지, 저장 실패를 화면에 어떻게 알릴지, 두 기기에서 같은 기록을 수정하면 어느 값을 남길지입니다. 서버에 저장했다는 표시도 실제 응답을 확인한 뒤 보여 주어야 합니다.

문서에 나오는 localStorage의 동기식(synchronous) API라는 말은 기기 간 동기화를 뜻하지 않습니다. 저장·읽기 작업이 끝날 때까지 다음 JavaScript 실행이 기다린다는 의미입니다. 큰 데이터를 자주 다룰 때의 성능 문제와도 관련이 있습니다. MDN: Web Storage의 동기식 동작

현재 문제가 해결됐는지는 필요한 기능으로 확인하세요. 한 기기용 앱은 같은 환경에서 저장 후 다시 읽히는지, 여러 기기용 앱은 A에서 저장한 기록이 새로 접속한 B에서도 조회되는지 확인해야 합니다. 화면 배포와 데이터 공유를 각각 점검하면 다음에 구현할 기능이 분명해집니다.