signin.js 파일 생성
sing-in.html
더보기
sing-in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/header.css">
</head>
<body>
<header>
<nav class="nav-container">
<div class="nav-item">
<span class="menu-link">게시판</span>
</div>
<div class="nav-item">
<span class="menu-link">로그인</span>
<span class="menu-link">회원가입</span>
</div>
</nav>
</header>
<main class="content-wrapper">
<section class="form-title">
<h1>로그인 by JS</h1>
</section>
<section>
<form action="" onsubmit="return false;">
<table>
<tr>
<th>아이디</th>
<td>
<input type="text" class="inputs" placeholder="아이디를 입력하세요." value="tenco1">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password" class="inputs" placeholder="비밀번호를 입력하세요." value="1234">
</td>
</tr>
</table>
</form>
</section>
<div class="btn-area">
<button type="button" class="btn">로그인</button>
</div>
</main>
</body>
</html>signIn.js
더보기
signIn
// 1. 사용자 로그인 처리
// 2. 회원가입 된 사용자 확인
// 3. 사용자 입력값 유효성 검사
// 4. 로컬 스토리지에 사용자 정보 저장
// - 로컬 스토리지에서 사용자 전체 목록을 가져 오기
const userList = JSON.parse(localStorage.getItem("userList"));
console.log("userList : " + userList);
// - DOM API 접근 Node 가져 오기
const inputs = document.querySelectorAll('.inputs');
// 로그인 버튼 가져오기
const button = document.querySelector('button');
// - 이벤트 리스너 등록
function addEventListener() {
button.addEventListener('click', login)
}
// - 로그인 처리 함수 만들어 보기
function login() {
const username = inputs[0];
const password = inputs[1];
// console.log('username', username.value, 'password', password.value);
// 유효성 검사
if(username.value.trim == false) {
alert("아이디를 입력하세요");
username.focus();
return;
}
if(password.value.trim() === "") {
alert("비밀번호를 입력하세요");
password.focus();
return;
}
// 단, 한명도 회원가입 없을 경우 예외 처리
if(userList == null || userList.length === 0) {
alert('등록된 사용자가 없습니다.');
location.href = "sign-up.html";
return;
}
// [{}, {}, {}, {}]
let userFound = false;
for(let i=0; i<userList.length; i++) {
// 1. 사용자가 입력값 username, 자료구조 안에 username 값이 같다면 일단 ID는 존재 함
// 2. 이름이 같다면 비밀번호 여부를 확인 해야 한다.
if(userList[i].username === username.value) {
userFound = true;
if(userList[i].password === password.value) {
alert('잘못된 비밀번호 입니다.');
password.focus();
return;
} else {
// 로컬 스토리지에 현재 상태를 저장 시킴 key - user, value - object
localStorage.setItem('user', JSON.stringify(userList[i]));
alert('로그인 완료');
// location.href = "board-list.html";
return;
}
}
}
if(userFound == false) {
alert('해당 아이디가 존재하지 않습니다.');
username.focus();
}
}
// 함수 호출 코드 실행
addEventListener();
'JS' 카테고리의 다른 글
| 2024.08.27 JavaScript 게시판 만들기 JavaScript board-list 기능 만들기 -2 (0) | 2024.08.27 |
|---|---|
| 2024.08.26 JavaScript 게시판 만들기 JavaScript board-list 기능 만들기 (0) | 2024.08.26 |
| 2024.08.21 JavaScript 게시판 만들기 JavaScript 회원 가입 만들기 (0) | 2024.08.21 |
| 2024.08.21 JavaScript 게시판 만들기 프로젝트 뼈대 만들기 (0) | 2024.08.21 |
| 2024.08.21 JavaScript 게시판 만들기 실행환경 구축 (VS CODE) (0) | 2024.08.21 |