로컬 스토리지에 저장한 값이 CSS 에 제대로 적용되지 않는 문제가 있습니다

음 로컬스토리지 달라지는것에 따라 css를 어떻게 적용하시는걸까요?

제 추측으로는 로컬 스토리지에서 값을 불러온 뒤에, 별도의 파싱 과정을 거치지 않고 사용하고 있는게 아닐까 생각됩니다. 로컬 스토리지에 저장되는 값은 모두 문자열로 저장되기 때문에, getItem으로 받아오신 뒤 값을 다시 한 번 확인하셔야될 것 같아요(`false`라는 문자열은 Boolean으로 변환 된 경우 true로 계산됩니다). 당장 개발자 콘솔에서 아래 코드를 실행해보시면 무슨 말인지 아실 것 같습니다! 로컬 스토리지에서 값을 받아온 뒤, `true`/`false` 문자열과 비교 연산을 하거나, JSON.parse를 이용해서 한번 파싱을 하신 뒤 사용하셔야 할 것 같아요. 참고 - https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage > 키와 값은 항상 각 문자에 2바이트를 할당하는 UTF-16 DOMString의 형태로 저장합니다. 객체와 마찬가지로 정수 키는 자동으로 문자열로 변환합니다.

1
2
3
4
5
6
7
8
9
window.localStorage.setItem('nightMode', false)
var localStorageValue = window.localStorage.getItem('nightMode')

console.log(localStorageValue); // false
console.log(typeof localStorageValue); // string
console.log(Boolean(localStorageValue)); // true

console.log(localStorageValue === 'true') // false
console.log(JSON.parse(localStorageValue)) // false

문제가 발생하는 원인은 페이지가 처음 로딩될 때 로컬 스토리지의 'nightMode' 값이 CSS에 제대로 반영되지 않기 때문입니다. 페이지 로딩 시점에 로컬 스토리지의 값을 확인하고 해당 값을 CSS에 반영해야 합니다. 예를 들어, JavaScript를 사용하여 로컬 스토리지의 'nightMode' 값을 확인하고 페이지에 야간 모드를 적용할 수 있습니다. 다음과 같이 코드를 작성해 보세요: 이렇게 구현하면 페이지가 처음 로딩될 때 로컬 스토리지의 'nightMode' 값을 확인하여 야간 모드가 적용된 CSS 스타일로 페이지가 표시되거나, 야간 모드가 적용되지 않은 CSS 스타일로 페이지가 표시되도록 할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 페이지 로딩 시 로컬 스토리지의 값을 확인하고 야간 모드를 적용/해제하는 함수
function applyNightMode() {
  const nightMode = localStorage.getItem('nightMode');
  const body = document.body;

  if (nightMode === 'true') {
    body.classList.add('night-mode'); // 야간 모드를 적용할 클래스 이름을 설정하세요
  } else {
    body.classList.remove('night-mode');
  }
}

// 페이지 로딩 시 함수 호출
window.addEventListener('DOMContentLoaded', applyNightMode);

// 토글 버튼 클릭 시 야간 모드와 주간 모드를 전환하는 함수
function toggleNightMode() {
  const nightMode = localStorage.getItem('nightMode') === 'true';
  localStorage.setItem('nightMode', !nightMode);
  applyNightMode();
}

// 토글 버튼에 클릭 이벤트 리스너 등록
document.getElementById('toggleButton').addEventListener('click', toggleNightMode);