발생한 문제
새로고침을 했을 때 다크모드 or 라이트모드 토글이 풀려버리는 버그가 있었는데, 이를 해결하기 위해 local storage를 사용해 사용자의 로컬에 데이터를 저장하도록 했다.
local storage란?
Local Storage는 웹 브라우저가 제공하는 저장소 중 하나로, 사용자의 로컬 컴퓨터에 데이터를 저장할 수 있는 방법이다. 이 저장소는 웹 애플리케이션에서 특정 데이터를 클라이언트 측에서 영구적으로 저장하고 싶을 때 유용하다. Local Storage의 특징은 다음과 같다고 한다.
1.
용량: Local Storage는 대략 5MB 정도의 데이터를 저장할 수 있다. 이는 쿠키보다 훨씬 큰 저장 용량을 제공한다.
2.
수명: Local Storage에 저장된 데이터는 만료 기간이 없다. 즉, 사용자가 브라우저의 캐시를 지우지 않는 한 데이터는 계속 유지된다.
3.
접근성: 동일 출처(동일한 프로토콜, 도메인, 포트)에 있는 웹 페이지에서만 Local Storage에 접근할 수 있다.
4.
키-값 쌍: 데이터는 키-값 쌍의 형태로 저장된다. 이는 간단한 문자열 데이터를 저장하는 데 적합하다.
5.
비동기성: Local Storage는 동기적으로 작동한다. 즉, Local Storage에 접근할 때 페이지 로딩이 지연될 수 있다.
6.
보안: Local Storage는 클라이언트 측에서만 접근 가능하며, HTTPS를 통해 전송되지 않습니다. 따라서 민감한 정보는 저장하지 않는 것이 좋다.
7.
사용 방법: JavaScript를 통해 Local Storage에 접근할 수 있다. 데이터를 저장, 조회, 수정, 삭제하는 API가 제공된다.
예시 코드
// 데이터 저장
localStorage.setItem('key', 'value');
// 데이터 조회
let data = localStorage.getItem('key');
// 데이터 삭제
localStorage.removeItem('key');
// 모든 데이터 삭제
localStorage.clear();
JavaScript
복사