[JavaScript] localStorage로 회원가입 간단 구현해보기

Web

[JavaScript] localStorage로 회원가입 간단 구현해보기

도도고영 2024. 1. 27. 21:00

HTML

sign-up.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Signup Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <form id="signupForm" style="margin-left: 20px;">
        <h2>Signup</h2>
        <input type="text" id="signupUsername" placeholder="Username" required>
        <input type="password" id="signupPassword" placeholder="Password" required>
        <button type="button" onclick="signup()">Signup</button>
    </form>
    <script src="userAuth.js"></script>
</body>

sign-in.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <form id="loginForm">
        <h2>Login</h2>
        <input type="text" id="loginUsername" placeholder="Username" required>
        <input type="password" id="loginPassword" placeholder="Password" required>
        <button type="button" onclick="login()">Login</button>
        <script src="userAuth.js"></script>
    </form>
</body>

CSS

style.css

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

input {
    width: calc(100% - 20px);
    padding: 10px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    width: calc(100% - 20px);
    padding: 10px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

h2 {
    margin-bottom: 20px;
    color: #007BFF;
}

JavaScript

userAuth.js

// 페이지 로드 시 데이터 가져오기
var storedUserData = localStorage.getItem('userData');
var userData = storedUserData ? JSON.parse(storedUserData) : {};

function login() {
    var username = document.getElementById("loginUsername").value;
    var password = document.getElementById("loginPassword").value;

    // 로그인 처리 로직
    if (userData[username] && userData[username].password === password) {
        // 로그인 성공 시 alert 창 표시
        alert("Login successful");
    } else {
        // 로그인 실패 시 alert 창 표시
        alert("Invalid username or password");
    }
}

function signup() {
    var username = document.getElementById("signupUsername").value;
    var password = document.getElementById("signupPassword").value;

    // 이미 존재하는 사용자인지 확인
    if (userData[username]) {
        alert("Username already exists");
    } else {
        // 새로운 사용자를 저장
        userData[username] = { password: password };
        console.log("Signup successful");

        // 회원가입 성공 시 로그인 페이지로 리디렉션
        window.location.href = 'sign-in.html';

        // 회원가입 시 사용자 데이터를 로컬 스토리지에 저장
        localStorage.setItem('userData', JSON.stringify(userData));
    }
}

function showUserData() {
    console.log(userData.toString());
}