본문 바로가기

👨‍💻 FrontEnd/🟡 자바스크립트 [JavaScript]

[ Javascript ] 로컬스토리지 활용한 아이디 기억하기 (리멤버 미) 기능

자바스크립트에서 제이쿼리를 활용한 아이디 기억하기 코드입니다. 

 

아이디 기억하기 기능을 구현하기 위한 방법들이 다양하게 존재하지만 

이메일이나 아이디의 경우 브라우저 로컬스토리지에 저장하는 것이 적합할 것이라고 판단되어 로컬스토리지 저장방법을 선택했습니다. 

 

로직은 다음과 같습니다. 

$(document).ready(function() {

	if (localStorage.checkbox && localStorage.checkbox !== "") {
		$('#rememberId').attr('checked', 'checked');
		document.getElementById("email").value = localStorage.email;
		email = localStorage.email;

	} else {
		$('#rememberId').removeAttr('checked');
		$('#email').val('');
	}
	$('#rememberId').click(function() {
		if ($('#rememberId').is(':checked')) {
			localStorage.email = $('#email').val();
			localStorage.checkbox = $('#rememberId').val();
		} else {
			localStorage.email = "";
			localStorage.checkbox= "";
		}
	})

})