“Local Storage”에 저장된 데이터, 대체 어디에 쓰이는 걸까?

들어가며

웹사이트를 개발하거나 다른 웹서비스의 동작을 살펴보다 보면 한 번쯤 “이 데이터는 어디에 저장되어 있는 거지?”라는 생각이 들 때가 있습니다.

특히 로그인 상태나 사용자의 설정값, 최근 검색어, 화면에서 선택한 옵션 등이 새로고침을 해도 그대로 유지된다면 브라우저 어딘가에 데이터가 저장되어 있을 가능성이 높습니다.

이럴 때 가장 먼저 확인해볼 만한 곳이 바로 개발자 도구의 Local Storage입니다.

저도 웹페이지를 분석하면서 화면에 표시되는 데이터가 실제 서버에서 매번 받아오는 것인지, 아니면 브라우저에 저장된 값을 다시 사용하는 것인지 확인할 필요가 있어 개발자 도구를 열어 Local Storage를 살펴보게 됐습니다.

Local Storage란?

Local Storage는 웹 브라우저가 웹사이트별 데이터를 사용자의 컴퓨터에 저장할 수 있도록 제공하는 기능입니다.

쉽게 말하면 웹사이트가 브라우저에 작은 저장 공간을 하나 가지고 있다고 생각하면 됩니다.

여기에 문자열 형태의 데이터를 저장할 수 있으며, 일반적인 쿠키와 달리 저장된 데이터가 비교적 넉넉하고 브라우저를 종료했다가 다시 실행해도 데이터가 유지되는 특징이 있습니다.

예를 들어 다음과 같은 값들이 저장될 수 있습니다.

• 사용자 화면 설정
• 언어 설정
• 최근 선택한 메뉴
• 검색 관련 정보
• 웹서비스에서 사용하는 상태값
• 로그인과 관련된 일부 클라이언트 정보
• 서비스 자체에서 사용하는 임시 데이터

다만 Local Storage에 저장되어 있다고 해서 반드시 중요한 서버 데이터라는 의미는 아닙니다.

단순히 화면을 편리하게 유지하기 위해 저장하는 값일 수도 있고, 실제 데이터는 서버에 있고 Local Storage에는 식별자나 설정값만 들어 있을 수도 있습니다.

이 부분은 직접 내용을 확인해봐야 정확하게 판단할 수 있습니다.

크롬 개발자 도구에서 Local Storage 확인하기

가장 간단한 방법은 크롬에서 확인하려는 웹사이트를 먼저 열어놓는 것입니다.

그다음 키보드에서 F12를 누르거나 마우스 오른쪽 버튼을 클릭한 뒤 검사를 선택합니다.

그러면 Chrome DevTools가 나타납니다.

여기에서 상단 메뉴 또는 >> 메뉴를 통해 Application 항목을 찾습니다.

Application 화면으로 들어가면 왼쪽에 Storage라는 영역이 보입니다.

그 안에서 다음과 같은 항목을 확인할 수 있습니다.

Storage → Local Storage → 해당 웹사이트 주소

해당 항목을 선택하면 오른쪽에 Key와 Value 형태로 저장된 데이터가 표시됩니다.

여기서 재미있는 부분은 단순히 데이터가 있다는 것보다 어떤 이름으로 저장되어 있는지를 확인하는 것입니다.

예를 들어 Key 이름이 token, user, settings, search, data처럼 되어 있다면 어느 정도 용도를 추측할 수 있습니다.

하지만 이름만 보고 정확한 역할을 단정해서는 안 됩니다.

개발자가 임의로 이름을 정할 수 있기 때문에 실제 웹페이지의 JavaScript 코드나 Network 요청과 함께 확인해야 하는 경우도 많습니다.

Local Storage와 Network를 같이 봐야 하는 이유

웹페이지를 분석할 때 Local Storage만 확인하면 오히려 잘못 판단할 수 있습니다.

예를 들어 화면에 어떤 정보가 표시되고 있다고 해보겠습니다.

그 정보가 Local Storage에 저장되어 있다고 해서 반드시 Local Storage에서 화면 데이터를 가져온다는 뜻은 아닙니다.

페이지가 처음 열릴 때 서버에 API 요청을 보내고,

서버 → 브라우저 → 화면

순서로 데이터를 가져온 뒤 일부 값을 Local Storage에 저장할 수도 있습니다.

반대로 Local Storage에 이미 저장된 값을 JavaScript가 읽어서 화면에 보여줄 수도 있습니다.

따라서 저는 이런 경우 Application 탭과 Network 탭을 함께 확인하는 방법을 사용하는 편입니다.

Network 탭에서는 페이지를 새로고침한 뒤 어떤 요청이 발생하는지 살펴볼 수 있습니다.

특히 Fetch/XHR 항목을 보면 API 요청을 확인하기 편합니다.

요청 URL, Request Method, Query String, Response 등을 차례대로 살펴보면 해당 화면의 데이터가 어디에서 만들어지는지 조금씩 윤곽이 잡힙니다.

Local Storage에서 JSON 데이터가 보인다면?

가끔 Local Storage의 Value 부분을 확인했는데 일반적인 문자열이 아니라 상당히 긴 JSON 형태의 데이터가 들어 있는 경우도 있습니다.

예를 들어 여러 개의 항목이 중괄호 { } 또는 대괄호 [ ] 형태로 들어 있다면 JavaScript에서 사용하는 객체나 배열을 문자열로 변환해 저장했을 가능성이 있습니다.

이런 데이터를 확인할 때는 무작정 수정하기보다 먼저 복사해서 구조를 살펴보는 것이 좋습니다.

어떤 Key가 있는지, 배열인지 객체인지, 날짜나 ID 같은 값이 포함되어 있는지 확인하면 해당 데이터가 어떤 목적으로 사용되는지 파악하는 데 도움이 됩니다.

Local Storage를 직접 수정해도 될까?

개발 과정에서는 Local Storage 값을 직접 수정해보는 것도 상당히 유용합니다.

예를 들어 특정 설정값을 true에서 false로 변경했을 때 화면이 어떻게 바뀌는지 확인하거나, 저장된 값을 삭제했을 때 사이트가 어떤 초기 상태로 돌아가는지 테스트할 수 있습니다.

다만 운영 중인 서비스에서 인증정보나 다른 사용자의 데이터에 접근하려고 시도하는 것은 별개의 문제입니다.

Local Storage는 내 브라우저에 저장된 클라이언트 측 데이터를 확인하고 웹페이지의 동작 원리를 이해하는 용도로 활용하는 것이 가장 안전합니다.

특히 토큰이나 인증과 관련된 값이 발견됐다면 함부로 공개하거나 다른 사람에게 전달하지 않는 것이 좋습니다.

Local Storage를 확인하면서 알게 되는 것

개발자 도구를 조금만 자세히 들여다보면 웹사이트가 생각보다 다양한 방식으로 브라우저와 데이터를 주고받는다는 것을 알 수 있습니다.

HTML 화면만 보고 있을 때는 단순히 버튼 하나와 표 하나가 있는 것처럼 보이지만, 실제로는 JavaScript가 실행되고 API 요청이 발생하고 브라우저 저장소에 값이 기록되는 등 여러 과정이 동시에 진행됩니다.

그래서 웹서비스를 개발하거나 기존 페이지의 동작 방식을 파악할 때는 단순히 화면만 보는 것보다 Elements, Console, Network, Application 탭을 함께 확인하는 습관을 들이는 것이 도움이 됩니다.

특히 처음 개발자 도구를 접했다면 Local Storage부터 확인해보는 것도 좋은 방법입니다.

“이 사이트는 어떤 데이터를 브라우저에 저장하고 있을까?”

라는 질문 하나만 가지고 살펴봐도 웹페이지의 내부 동작을 이해하는 데 꽤 많은 도움이 됩니다.

결국 Local Storage는 단순한 저장 공간이 아니라 웹사이트와 브라우저가 어떻게 데이터를 주고받고 관리하는지 살펴볼 수 있는 하나의 단서라고 볼 수 있습니다.

다음에 웹사이트를 개발하거나 특정 화면의 동작이 예상과 다르게 움직인다면, 먼저 개발자 도구를 열고 Application의 Local Storage와 Network 탭을 함께 확인해보는 것을 추천합니다.

처음에는 낯설어 보이지만 몇 번 직접 확인하다 보면 어떤 데이터가 어디에서 만들어지고, 어떤 값이 브라우저에 남는지 조금씩 눈에 들어오기 시작합니다.