[Clone] Nomadcoders momonto - JavaScript input text 엔터 키다운 시 localStorage 저장

과정

1. localStorage에 currentUser 키 값이 없는 경우

• '이름이 무엇인가?' text 타입인 input을 보여줌
• currentUser localStorage에 저장

2. 키 값이 존재하는 경우

• '이름이 무엇인가?'라는 input을 보이지 않게 함
• 시계와 내 이름, 할 일 목록 요소가 보여지게 함

코드

<section class="question">
    <input type="text" class="questionInput" placeholder="What's Your Name">
  </section>
  <section class="clockAndTodo">
    <div class="clock">
      <span class="time"></span>
      <span class="name"></span>
    </div>
    <div class="toDo">
      <input type="text" class="todoText" placeholder="Write To Do here">
      <ul class="List">
        <li class="item">
          <input type="checkbox" class="checkbox">
          <span class="content">to do</span>
          <button class="delete">
            <i class="far fa-times-circle"></i>
          </button>
        </li>
      </ul>
    </div>
  </section>

const input = document.querySelector(".questionInput");
const USER_LS = "currentUser";
const SHOW = "showing";
const clockAndTodo = document.querySelector(".clockAndTodo");
const nameSpan = document.querySelector(".name");
const question = document.querySelector(".question");

function printContent(currentUser) {
  question.classList.remove("showing");
  clockAndTodo.classList.add("showing");
  nameSpan.innerText = `Hello ${currentUser}`;
}

function saveCurrentUser() {
  input.addEventListener("keydown", (e) => {
    if (e.keyCode === 13) {
      const value = input.value;
      localStorage.setItem(USER_LS, value);
      printContent(value);
    }
  });
}

function showQuestion() {
  question.classList.add(SHOW);
}

function loadclockAndTodo() {
  const currentUser = localStorage.getItem(USER_LS);
  if (currentUser === null) {
    showQuestion();
    saveCurrentUser();
  } else {
    printContent(currentUser);
  }
}

loadclockAndTodo();

알게 된 것

• localStorage : local에 저장되는 저장소이다.

  • localStorage.setItem('key', 'value') : 키와 값을 저장한다.
  • localStorage.getItem('key') : 키로부터 값을 검색한다.
  • localStorage.removeItem('key') : 키에 해당하는 값을 삭제한다.
  • localStorage.clear() : 저장소에 저장되어 있는 데이터 전부를 삭제한다.

  주의할 점 : 오직 문자열 데이터만 지원한다!