Dark Mode

checkbox 선택 시 다크모드 실행

---

HTML

 <h1>Theme</h1>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Incidunt quibusdam expedita delectus. Laudantium iusto, cumque quidem repudiandae facilis, perspi
        ciatis illum quis reiciendis culpa iure et aliquam. 
        Itaque autem quidem mollitia?
    </p>

    <input type="checkbox" id="checkbox" name>
    <label for="checkbox">Dark Mode</label>

CSS

<style>
        .dark-mode {
            background-color: #333;
            color: pink;
        }

</style>

JS

<script>
        var checkbox = document.getElementById('checkbox');
        var theme = localStorage.getItem('theme');

        console.log(checkbox)

        // 다크모드가 선택되었을 때
        var isDarkMode = localStorage.getItem('darkedAt');

        if (isDarkMode) {
            document.body.classList.add('dark-mode');
            checkbox.checked = true;
        }

        // 테마가 바뀔 때
        checkbox.addEventListener('change', (e) => {
            var checked = e.target.checked;

            if (checked) {
                document.body.classList.add('dark-mode');
                localStorage.setItem('darkedAt', new Date().toLocaleString());
            } else {
                document.body.classList.remove('dark-mode');
                localStorage.removeItem('darkedAt');
            }
        })
</script>

---

localStorage()

브라우저의 key-value 값을 Storage에 저장할 수 있으며 저장한 데이터는 세션간에 공유된다. 그렇기 때문에 세션이 바뀌어도 저장한 데이터가 유지된다.

종류

• setItem() - key, value 값 추가
  -> window.localStorage.setItem(key, value)

• getItem() - value 읽어오기
  -> window.localStorage.getItem(key)

• removeItem() - item 삭제
  -> window.localStorage.removeItem(key);

• clear - 도메인 내의 localStorage 값 전체 삭제
  -> window.localStorage.clear();

• length - 전체 item 개수 구하기
  -> window.localStorage.length;

• key() - index로 key 이름 찾기
  -> window.localStorage.key(index);

localStorage에는 문자열만을 저장할 수 있다.
숫자로 저장하더라도 실제로 저장되는 것은 문자열로 저장된다.
따라서 localStorage에 객체나 배열을 저장하기 위해서는 객체를 문자열로 변환해서 저장해야한다.

전체 key, value 가져오기
ex) for문 사용

// 초기화
window.localStorage.clear();
 
// setItem
window.localStorage.setItem('name', 'anna');
window.localStorage.setItem('age', 20);
 
// 모든 key, value 출력
// output =>
//    age : 20
//    name : anna
for(let i = 0; i < window.localStorage.length; i++) {
  // key 찾기
  const key = window.localStorage.key(i);
  
  // value 찾기
  const value = window.localStorage.getItem(key);
  
  // 결과 출력
  document.write(key + " : " + value + "<br />");
}