📌로컬 스토리지(localStorage)

브라우저 상에 데이터를 저장할 수 있는 기술인 웹 스토리지에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있다. 세션 스토리지는 웹 페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면, 로컬 스토리지는 웹페이지의 세션이 끝나도 데이터가 지워지지 않는다.
웹 스토리지는 기본적으로 키(key)와 값(value)으로 이루어진 데이터를 저장할 수 있다.

localStorage.setItem("key", "value"); : 데이터 저장
localStorage.getItem("key", "value"); : 데이터 읽기(불러오기)
localStorage.removeItem("key"); : 해당 데이터 삭제
localStorage.clear(); : 모든 데이터 삭제

저장된 로컬 스토리지의 데이터는 브라우저의 콘솔 창을 열어 확인할 수 있다.

🔥연습

/*
  1. 로그인을 누르면 아이디와 비번이 깨끗해진다.
  2. 로그인 시, 아이디저장을 체크한 상태면 다음에 왔을 때 아이디가 기입되어있다.
    -> localStorage 활용!
    1) 로그인버튼 눌렀을 때 -> 체크박스 체크여부
    2) 체크 상태면 localStorage에 저장
    3) 이전에 아이디저장을 했으면, lacalStorage에서 불러와서 아이디 칸에 기입.
  3. 아이디는 한개만 저장된다. (제일 마지막에 저장되었던 아이디로 활용)
*/

🔽HTML 코드

<div class="container">
  <h1>로그인</h1>
  <h3>아이디</h3>
  <input type="text" id="inputId" placeholder="아이디">
  <h3>비밀번호</h3>
  <input type="password" id="inputPw"placeholder="비밀번호">

  <label for="">아이디 저장<input type="checkbox" id="checkIdSave"></label>

  <button id="btnLogIn">로그인</button>
</div>

🔽CSS 코드

.container{
  width: 400px;
  border: 1px solid black;
  margin: 0 auto;
  padding: 50px;
  display: flex;
  flex-direction: column;
}

.container label{
  margin-top: 20px;
}

.container button{
  margin-top: 20px;
}

.container input{
  font-size: 1.25rem;
  padding-left: 10px;
}

.container input:focus{
  border: 1px solid red;
}

h1{
  text-align: center;
}

🔽JS 코드

window.onload = ()=>{

  const btn = document.getElementById('btnLogIn');
  const inputId = document.getElementById('inputId');
  const inputPw = document.getElementById('inputPw');
  const inputChk = document.getElementById('checkIdSave');
  
  inputId.value = localStorage.getItem("id");

  btn.addEventListener('click', function(){
  	if(inputChk.checked == true){
      localStorage.setItem("id", inputId.value);
  	}
  	inputId.value = '';
  	inputPw.value = '';
  });
  
}

🚩아이디 저장 체크 후 실행결과

/*
  *추가요구사항
  4. 아이디 저장을 풀고 로그인하면, 아이디가 저장되지 않는다.
  5. 저장된 아이디를 불러와서 표기한 경우에는 아이디 저장 체크박스도 같이 체크된 상태로 시작한다.
*/

🔽JS 코드 추가 및 변경

window.onload = ()=>{

  const btn = document.getElementById('btnLogIn');
  const inputId = document.getElementById('inputId');
  const inputPw = document.getElementById('inputPw');
  const inputChk = document.getElementById('checkIdSave');

  let id_localStorage = localStorage.getItem("id");
  inputId.value = id_localStorage;
  if(id_localStorage != '' && id_localStorage != null){
    inputChk.checked = true;
  }

  btn.addEventListener('click', function(){
    if(inputChk.checked == true){
      localStorage.setItem("id", inputId.value);
    } else{
      localStorage.setItem("id", "");
      // localStorage.removeItem("id"); -> 값이 null이 됨
    }
    inputId.value = '';
    inputPw.value = '';
  });
}

🚩실행 결과