지난 글에서 다크모드 버튼을 만들어봤는데, 아쉬운 점이 하나 있었죠. 버튼을 눌러 다크모드로 바꿔도 새로고침하면 다시 라이트모드로 돌아가는 문제였습니다. 오늘은 이 문제를 해결해서, 방문자가 한 번 설정한 모드가 계속 기억되도록 만들어보겠습니다.
[왜 새로고침하면 초기화될까요?]
지난번 사용한 classList.toggle()은 그 순간 화면에만 클래스를 붙였다 뗐다 할 뿐, 그 정보를 어디에도 저장하지 않습니다. 그래서 페이지를 새로 열면 브라우저는 "다크모드였다"는 사실을 전혀 기억하지 못하고 처음 상태(라이트모드)로 되돌아갑니다.
이 정보를 기억하게 하려면, 브라우저에 따로 저장해둬야 합니다. 이때 쓰는 것이 localStorage입니다.
[localStorage란?]
브라우저가 방문자의 기기에 작은 정보를 저장해두는 공간입니다. 탭을 닫거나 컴퓨터를 재부팅해도 데이터가 지워지지 않고 남아있습니다. 로그인 상태 유지, 장바구니 정보 등 "다음에 다시 왔을 때도 기억해야 하는 정보"를 저장할 때 널리 쓰입니다.
localStorage.setItem('key', 'value'); // 저장
localStorage.getItem('key'); // 불러오기
localStorage.removeItem('key'); // 삭제[실전: 다크모드 설정 저장하기]
지난 글의 버튼 코드를 아래처럼 수정합니다.
<button onclick="toggleDarkMode()">
다크모드 전환
</button>
<script>
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
if (document.body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
}
// 페이지가 열릴 때 저장된 설정을 확인해서 바로 적용
if (localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark-mode');
}
</script>동작 원리는 이렇습니다.
- 버튼을 누르면 다크모드 클래스가 켜지거나 꺼집니다.
- 동시에 지금 상태가
dark인지light인지를localStorage에 저장합니다. - 페이지가 다시 열릴 때, 저장된 값이
dark이면 자동으로 다크모드 클래스를 붙여줍니다.
[깜빡임(Flash) 현상 줄이기]
위 코드만 적용하면, 페이지가 열릴 때 아주 잠깐 라이트모드로 보였다가 다크모드로 바뀌는 깜빡임이 생길 수 있습니다. 스크립트가 실행되는 타이밍 때문입니다. 이를 줄이려면, 위 자바스크립트 코드를 <body> 태그 맨 아래가 아니라 <head> 태그 안, 최대한 위쪽에 배치하는 것이 도움이 됩니다. 화면이 그려지기 전에 먼저 설정을 확인하게 되어 깜빡임이 줄어듭니다.
[초보자가 자주 하는 실수 2가지]
- 저장한 값과 불러올 때 값을 다르게 쓰는 경우: 저장할 땐
'dark'로 저장했는데 불러올 때'Dark'나'DARK'로 비교하면 일치하지 않아 작동하지 않습니다. 대소문자까지 정확히 똑같아야 합니다. - 시크릿(익명) 브라우징 모드에서 테스트하는 경우: 일부 브라우저의 시크릿 모드에서는
localStorage가 탭을 닫으면 초기화됩니다. 정상적으로 작동하지 않는다고 오해하기 쉬운데, 일반 브라우징 모드에서 다시 테스트해보세요.
핵심 요약
localStorage는 브라우저에 정보를 저장해서, 다시 방문해도 기억하게 해주는 기능입니다.- 버튼을 누를 때
localStorage.setItem()으로 상태를 저장하고, 페이지가 열릴 때getItem()으로 불러와 적용합니다. - 깜빡임을 줄이려면 관련 스크립트를
<head>안, 최대한 위쪽에 배치하세요. - 저장 값과 비교 값의 대소문자가 정확히 일치해야 합니다.
이제 여러분의 블로그는 방문자가 다크모드를 켜두면, 다음에 다시 와도 그 설정을 그대로 기억하게 됩니다. 작은 디테일이지만 사용자 경험에는 꽤 큰 차이를 만듭니다.