[js] localStorage로 가볍게 회원가입 구현하기 & localStorage 보는 법

DB로 하는 것이 옳습니다. 그러나 DB를 배우기 전에 사이트에 틀이라도 회원가입을 구현하고싶어서 localStorage를 사용해봤습니다. 실전에서는 회원가입은 localStorage로 진행하면 절대 안됩니다. 민감한 정보들을 다루기 때문입니다.  또한 localStorage는 개발자도구에서 저장한 데이터를 볼 수 있습니다.

---

 

#HTML

 

<form class="singUp-form">
        <input type="email" id="email" placeholder="Email" required />
        <input type="password" id="password" placeholder="password" required />
        <input type="submit" id="singUp-form" value="SingUp" />
</form>

 

추가로 name하고 싶다면 type, id, plascholder 값만 다르게 지정하시면 됩니다. name의 type은 "text"로 하시면 됩니다.

 

 

---

# JS

 

	const singUpForm = document.querySelector('.singUp-form');
    	const email = document.getElementById('email');
	const password = document.getElementById('password');
    
        function singUpData(evn) {
        
        evn.preventDefault(); // 이벤트 _ form 기본 동작인 새로고침 막기

        const userEmail = email.value;
        const userPassword = password.value;
        
        singUpShow(userEmail, userPassword);
        };

        function singUpShow(userEmail, userPassword){
            
            localStorage.setItem("userEmail", userEmail);
    		localStorage.setItem("userPassword", userPassword);
    
            alert(`${userEmail}님, 반갑습니다`);
        
        };

        singUpForm.addEventListener("submit", singUpData);

 

input 값을 상수에 넣고 그 값들만 singUpShow 함수에 넣었습니다. singUpShow 인자 값들은 localStorage()에 저장했습니다.

 

localStorage에 저장하기위해 setItem()메소드를 사용했습니다.

 

localStorage.setItem("localStorage Key", 저장할 값);

 

 

---

 

브라우저에서 localStorage 보는 법은 chrome > ctrl + shift + I  또는 오른쪽 상단에서 도구 더보기의 개발자도구 > Application에서 Local Storage 클릭하면 볼 수 있습니다. 

 

 

정규표현식은 저번에 올린 정규표현식을 사용한 회원가입 게시글을 참고하시면 좋을 듯 합니다. 

 

 

* 참고 사이트 *

 

input type에 대해서 더 알고싶다면 아래 사이트 참고해주세요.

 

HTML Input 요소의 타입들(types)_jun.hansung

 

http://jun.hansung.ac.kr/CWP/htmls/HTML%20Input%20Types.html