바닐라 JS 크롬 앱 만들기 (4) - 2

1. localStorage

브라우저에게 무언가를 저장할 수 있게 해주는 공간

개발자 도구 > Application > localStorage 에 존재

 

• 아이템 저장
  • window.localStorage.setItem('key', 'value')
• 아이템 키로 값 불러오기
  • window.localStorage.getItem('key')
  • 키가 없는 경우 null 리턴
  • 즉 유효성 검사를 하려면 getItem('key')가 null 인지 아닌지로!
• 아이템 키로 삭제
  • window.localStorage.removeItem('key')

 

 

input 으로 유저 정보를 submit 으로 입력 받아 ->

브라우저에 임시로 저장해두고 ->

그 저장된 값을 키로 확인하여 ->

h1 태그로 띄우기

const loginForm = document.querySelector('#login-form');
const loginInput = loginForm.querySelector('input');
const userNameH1 = document.querySelector('h1');

const HIDDEN_CLASSNAME = 'hidden';
const USER_KEY = 'User';

let greeting = function(username) {
  userNameH1.innerText =`Hello, ${username}`;
  userNameH1.classList.remove(HIDDEN_CLASSNAME);
}

let onLoginSubmit = function(info) {
  info.preventDefault();

  const username = loginInput.value;
  loginForm.classList.add(HIDDEN_CLASSNAME);
  greeting(username);
  window.localStorage.setItem(USER_KEY, username);
}

const savedUsername = window.localStorage.getItem(USER_KEY);

if(savedUsername === null ) {
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener('submit', onLoginSubmit);
} else {
  greeting(savedUsername);
}