웹프로젝트 로그인창완료

------- 로그인창

자바스크립트

function signup(){

    let savedUsername_test = "";

    let savedPassword_test = "";

    let savedNickname = document.getElementById('nickname').value; //vaule 가져온다.

    let savedName = document.getElementById('name').value;

    let savedPassword = document.getElementById('password').value;

   

    console.log(savedNickname);

    console.log(savedName);

    console.log(savedPassword);

   

    localStorage.setItem("userNickname",savedNickname);

    localStorage.setItem("userName",savedName);

    localStorage.setItem("userPassword",savedPassword);

   

    // savedUsername_test = localStorage.getItem("userName");

    // // savedPassword_test = localStroage.getItem("userPassword");

   

    // savedPassword_test = localStorage.getItem("userPassword"); //login html에 오타는 없었나 ..

    // console.log("👍👍👍👍👍👍👍👍" + savedPassword_test)

    // console.log("👍👍👍👍👍👍👍👍" + savedUsername_test)

}

// signup();

html

            <div class="txt_field">

                <input type="text" id="nickname" required>

                <span></span>

                <label>nickname</label>

            </div>

            <div class="txt_field">

                <input type="text" id="name" required>

                <span></span>

                <label >name</label>

            </div>

        </div>

        <div class="form">

            <div class="txt_field">

                <input type="password" id="password" required>

                <span></span>

                <label >password</label>

            </div>

            <span class="span-position">password must be at least 8 characters</span>

           

로컬스토리지를 사용해볼건데

내가 signup창에서 (회원가입)에서 아이디 비번을 생성한후 로컬스토리지에 저장하고 로그인창으로 돌아와서

내가 입력한 아이디와 비번이 회원가입할때 아이디랑 비번이 같으면 로그인이 성공하고 아니면 로그인이 성공

못하게 해볼거다.

 

nickname과 name password는 모두 input태그안의 요소들이라서 입력하면 나오는 문자 그것들이라

생각하면 된다고 생각한다.

 

id 인 값들을 자바스크립트에서 document(=html) getElementById('nickname')vaule      {vaule(은 가져온다.)}

id 3개모두 가져온후에 로컬스토리지에 저장해주는데

(사인업js에서는 로컬스토리지에 저장만 해줄거다 왜냐하면 로그인 js에서 로컬스토리지에 저장된걸 불러와서

로그인할때 내가 입력한 아이디와 비번이 불러와진 로컬스토리지랑 비교하기 위해서이다.)

 

localStorage.setItem("userNickname",savedNickName); 

userNickname이건 별명이다.

 

function login() {

    // 입력한 아이디와 비밀번호를 가져옵니다.

    const username = document.getElementById('username').value;

    const password = document.getElementById('password').value;

   

    // 생성한 아이디와 비밀번호를 저장합니다.

    const savedUsername = localStorage.getItem("userName");

    const savedPassword = localStorage.getItem("userPassword");

   

위에는 login html에서 가져온 것이고 (document)붙어져 있음

아래는 signup js에서 가져온것이다.(localStorage)붙어져 있음

 

 

login html

            <div class="txt_field">

                <input type="text" id="username" name="username" required>

                <span></span>

                <label for="username">name</label>

            </div>

        </div>

        <div class="form">

            <div class="txt_field">

                <input type="password" id="password" name="password" required>

                <span></span>

                <label for="password" >password</label>

            </div>

signup js

 localStorage.setItem("userName",savedName);

    localStorage.setItem("userPassword",savedPassword);