개발하다 열받는 “localStorage”, 딱 1분이면 초기화됩니다

들어가며

웹사이트를 개발하다 보면 어느 순간부터 이상한 현상이 생길 때가 있습니다.

분명 소스 코드를 수정했는데 화면은 계속 예전 상태로 나오고, 로그아웃을 했는데 이전 설정값이 남아 있기도 합니다.

특히 프론트엔드에서 localStorage를 사용하고 있다면 이런 상황을 한 번쯤 만나게 됩니다.

저장된 값 때문에 문제가 발생한 것인지 확인하려고 코드를 계속 수정하다가, 결국 브라우저에 남아 있는 localStorage 데이터를 직접 확인하게 되는 경우가 많습니다.

저도 개발하면서 비슷한 상황을 자주 겪었습니다.

“이 값을 어디서 저장했지?” 하고 코드를 찾는 것보다 일단 브라우저에 저장된 데이터를 확인하고 필요 없는 값을 지워보는 것이 훨씬 빠를 때가 있습니다.

그래서 이번에는 로컬스토리지(localStorage)를 직접 지우는 방법​을 정리해보려고 합니다.

localStorage란 무엇인가?

localStorage는 브라우저에서 데이터를 저장할 수 있는 Web Storage 기능입니다.

서버에 데이터를 저장하는 방식과 달리 사용자의 브라우저에 데이터를 저장하기 때문에 간단한 설정값이나 임시 상태 등을 관리할 때 사용할 수 있습니다.

예를 들어 다음과 같이 데이터를 저장할 수 있습니다.

localStorage.setItem("username", "홍길동");
localStorage.setItem("theme", "dark");

그러면 브라우저의 localStorage에 다음과 같은 값이 저장됩니다.

username = 홍길동
theme = dark

나중에 저장된 값을 가져오려면 getItem()을 사용합니다.

const username = localStorage.getItem("username");
console.log(username);

결과는 다음과 같습니다.

홍길동

문제는 이렇게 저장한 데이터가 브라우저에 계속 남아 있을 수 있다는 것입니다.

개발 중에는 이 부분 때문에 의도하지 않은 동작이 발생하기도 합니다.

localStorage에서 특정 값만 지우는 방법

가장 기본적인 방법은 removeItem()을 사용하는 것입니다.

localStorage.removeItem("username");

이렇게 실행하면 username이라는 키만 삭제됩니다.

예를 들어 다음과 같은 데이터가 있다고 해보겠습니다.

username = 홍길동
theme = dark
language = ko

여기서 username만 삭제하고 싶다면,

localStorage.removeItem("username");

을 실행하면 됩니다.

그러면 결과적으로 다음과 같이 남습니다.

theme = dark
language = ko

개발 중 특정 데이터 하나 때문에 문제가 발생했을 때는 이 방법이 가장 깔끔합니다.

전체 데이터를 지우지 않고 문제가 되는 키만 골라서 삭제할 수 있기 때문입니다.

localStorage 전체를 지우는 방법

반대로 “이것저것 저장된 값이 너무 많아서 그냥 전부 초기화하고 싶다”는 상황도 있습니다.

이때는 clear()를 사용하면 됩니다.

localStorage.clear();

이 코드는 해당 사이트의 localStorage에 저장된 데이터를 모두 삭제합니다.

예를 들어,

username = 홍길동
theme = dark
language = ko
recentMenu = 3

같은 값들이 저장되어 있다면,

localStorage.clear();

실행 후에는 모두 삭제됩니다.

개발 과정에서 localStorage에 잘못된 데이터가 계속 남아 화면이 이상하게 동작한다면 한 번에 초기화하는 용도로 사용할 수 있습니다.

다만 주의할 점이 있습니다.

clear()는 특정 데이터 하나만 삭제하는 것이 아니라 현재 사이트의 localStorage 데이터를 전체 삭제하기 때문에 실제 운영 환경에서는 신중하게 사용해야 합니다.

브라우저 개발자도구에서 localStorage 직접 지우기

개인적으로 개발할 때 가장 편하게 사용하는 방법은 브라우저의 개발자도구입니다.

Chrome 기준으로 개발자도구를 열고 Application 탭으로 이동합니다.

그다음 왼쪽 메뉴에서 Storage → Local Storage를 찾아보면 현재 사이트에 저장된 데이터를 확인할 수 있습니다.

여기에서 해당 도메인을 선택하면 저장된 Key와 Value를 직접 확인할 수 있습니다.

예를 들어 다음처럼 보일 수 있습니다.

Key              Value
--------------------------------
username         홍길동
theme            dark
language         ko

여기서 필요 없는 항목을 선택해서 삭제하면 됩니다.

코드를 다시 실행하지 않아도 브라우저에 저장되어 있는 값을 직접 확인할 수 있다는 점이 편합니다.

특히 “내 코드에서는 분명 값을 삭제했는데 왜 계속 남아 있지?”라는 상황이라면 개발자도구에서 실제 localStorage 상태를 먼저 확인해보는 것이 좋습니다.

개발 중 localStorage를 직접 삭제해야 하는 상황

localStorage를 사용하는 프로젝트에서는 다음과 같은 상황이 생각보다 자주 발생합니다.

예를 들어 로그인 상태를 localStorage에 저장했다고 해보겠습니다.

localStorage.setItem("login", "true");

개발자가 로그아웃 기능을 수정하면서 저장 구조를 변경했다고 가정해보겠습니다.

그런데 기존 브라우저에는 이전에 저장했던 데이터가 그대로 남아 있습니다.

그러면 새로 작성한 코드가 아니라 예전에 저장된 값 때문에 예상하지 못한 동작이 발생할 수 있습니다.

이럴 때 브라우저 개발자도구에서 localStorage를 확인해보면 의외로 간단하게 원인을 찾을 수 있습니다.

저도 이런 경우에는 코드를 계속 의심하기보다는 먼저 브라우저 저장 데이터를 확인하는 편입니다.

생각보다 “코드 문제가 아니라 브라우저에 예전 데이터가 남아 있었던 것”으로 끝나는 경우가 있기 때문입니다.

JavaScript로 localStorage 삭제하기 정리

결국 가장 많이 사용하는 방법은 두 가지입니다.

특정 키만 삭제할 때는 removeItem()입니다.

localStorage.removeItem("키이름");

전체 데이터를 삭제할 때는 clear()입니다.

localStorage.clear();

둘의 차이는 명확합니다.

removeItem()
→ 특정 데이터 하나 삭제

clear()
→ 해당 사이트의 localStorage 전체 삭제

그래서 개발 중 특정 설정값만 초기화하고 싶다면 removeItem()을 사용하고, 저장된 데이터를 전부 초기 상태로 돌리고 싶다면 clear()를 사용하는 방식으로 구분하면 됩니다.

localStorage 삭제 전에 확인할 것

한 가지는 꼭 기억해두는 것이 좋습니다.

localStorage는 브라우저에 저장된 데이터이기 때문에 삭제한다고 해서 서버의 데이터까지 삭제되는 것은 아닙니다.

예를 들어 서버 DB에 회원정보가 저장되어 있고 브라우저에는 로그인 상태를 확인하기 위한 값이 저장되어 있다면, localStorage를 삭제하는 것과 서버 DB의 회원정보를 삭제하는 것은 전혀 다른 문제입니다.

따라서 localStorage를 삭제하기 전에 “지금 지우려고 하는 값이 정확히 무엇인지” 확인하는 것이 좋습니다.

특히 localStorage.clear()는 편하다는 이유로 습관적으로 사용하는 것보다는 정말 전체 초기화가 필요한 상황에서 사용하는 편이 안전합니다.

마무리

localStorage는 웹 개발에서 상당히 편리한 기능이지만, 개발하다 보면 오히려 문제의 원인이 되는 경우도 있습니다.

코드를 수정했는데도 이전 설정이 계속 적용되거나, 로그인 상태가 이상하게 유지되거나, 화면 설정이 초기화되지 않는다면 브라우저에 저장된 localStorage 데이터를 한번 확인해보는 것이 좋습니다.

정리하면 가장 기본적인 방법은 다음과 같습니다.

// 특정 키 삭제
localStorage.removeItem("username");

// 전체 삭제
localStorage.clear();

그리고 코드로 삭제하는 방법 외에도 Chrome 개발자도구의 Application → Local Storage에서 저장된 값을 직접 확인하고 삭제할 수 있습니다.

개발하면서 localStorage를 사용하다 보면 결국 한 번쯤은 “도대체 이 값이 어디에 남아 있는 거지?”라는 상황을 만나게 됩니다.

그럴 때 굳이 코드를 처음부터 다시 확인하기보다는 브라우저 개발자도구를 열어 localStorage부터 확인해보세요.

의외로 몇 초 만에 원인을 찾을 수도 있습니다.

특히 프론트엔드 개발에서는 브라우저에 남아 있는 데이터를 직접 확인하는 습관을 들여두면 디버깅 시간을 줄이는 데 꽤 도움이 됩니다.