로컬스토리지(localStorage) 로 데이터 저장하기
1) 로컬스토리지란?
로컬스토리지는 웹 브라우저 내에서 데이터를 임시로 저장하여, 해당 데이터를 웹 애플리케이션 및 사이트에 사용할 수 있도록 해주는 기능입니다.
이는 주로 key-value 형태로 저장되며, 브라우저를 닫고 재실행해도 데이터가 유지된다는 점에서 세션 스토리지와 차별화됩니다.
로컬스토리지는 브라우저에서만 접근이 가능하며, 외부에서는 접근이 불가능하여 임시 데이터 저장 또는 환경 설정 등 다양한 작업에 유용하게 사용됩니다.
- 데이터 영속성: 브라우저를 닫고 재실행해도 데이터가 유지됩니다.
- 보안: 브라우저에서만 접근 가능하며, 외부에서는 접근할 수 없습니다.
- 유연성: 임시 데이터 저장, 환경 설정 등 다양한 작업에 활용할 수 있습니다.
2) 구현 방법
로컬스토리지에 데이터를 저장, 불러오기, 삭제하는 방법은 매우 간단합니다. 아래는 각 작업에 대한 기본적인 예시입니다.
데이터 저장
localStorage.setItem('key','value');
데이터 불러오기
localStorage.getItem('key');
데이터 삭제
localStorage.removeItem('key'); 키값에 해당하는 데이터 삭제
localStorage.clear(); 모든데이터삭제
3) 사용 예시
로컬스토리지를 활용하여 간단한 로그인 기능을 구현해보겠습니다.
로그인 성공 시 로컬스토리지에 값을 true로 저장하고, 이를 통해 로그인 여부를 확인하는 방식입니다.
아래는 로그인 처리 로직의 예시입니다.
아래와 같이 간단하게 로그인 처리 로직을 만들었습니다.
로그인성공 시 로컬스토리지에 값을 true로 저장하겠습니다.
개발자 도구(F12)를 열고 Application 탭에서 좌측의 Local Storage를 선택하면, 생성된 값을 확인할 수 있습니다.
이를 통해 로그인 여부나 관리자 모드 여부 등을 처리할 수 있습니다.
다음은 로컬스토리지에 값이 있는 경우에만 Admin 버튼을 보여주고, 게시글 편집이 가능하도록 처리한 예시입니다.
위와 같이 로컬스토리지를 이용하여 간단한 로그인 기능을 구현할 수 있습니다.
다만, 여러 유저들을 관리해야 하는 경우 로컬스토리지를 이용한 로그인 기능은 보안상 적합하지 않기 때문에 다른 인증 방법을 고려해야 합니다.
궁금한 점이 있으면 댓글로 남겨주세요. 읽어주셔서 감사합니다. 😊