WIL 23-06-04

form 태그 안에 submit 이벤트를 수행하면 자동으로 엔터,

<form id="search-form">
        <label>영화 검색 : </label>
        <input name="searchValue" type="text" id="search-input" placeholder="영화 제목을 검색해 보세요" />
        <button type="submit" id="search-btn">검색</button>
    </form>

button type이 submit인걸 보고 button type에 대해 궁금해졌다.

button : 해당 버튼이 클릭할 수 있는 버튼(clickable button)임을 명시함.

submit : 해당 버튼이 폼 데이터(form data)를 제출하는 제출 버튼(submit button)임을 명시함.

reset : 해당 버튼이 폼 데이터를 초기값으로 리셋하는 리셋 버튼(reset button)임을 명시함.
ㅤ

• localStorage

쿠키와 유사하지만 안정적이고, 웹브라우저 자체 저장 공간

데이터 저장하기(setItem) : localStorage.setItem('key', 'value');

데이터 불러오기(getItem): localStorage.getItem('key');

데이터 삭제하기(removeItem): localStorage.removeItem('key');

스토리지에 저장을 하면 같은 도메인에서 페이지가 이동되더라도 값을 읽어올 수 있음

Ex) 사용자 로그인 정보, 사용자테마, 사용자 언어 선택

확인: 관리자도구 - application - storage
ㅤ

• 팀과제 영화 리뷰 창 열림/닫힘 구현하기

onclick="open_box()" // 댓글 창 버튼 내부에 추가
onclick="close_box()" // 리뷰박스 내부 닫기 버튼에 추가

// 열기, 닫기 함수 - 리뷰박스를 가져와서 style.display 사용
function open_box() {
  const reviewBox = document.getElementById("reviewBox");
  reviewBox.style.display = "block";
}
function close_box() {
  const reviewBox = document.getElementById("reviewBox");
  reviewBox.style.display = "none";
}

• 구현 수정

위 상태는 사이트에 들어가면 리뷰박스가 보이는 상태
처음에는 안보이다가 버튼을 누르면 열려야 함

style="display: none;" // 리뷰박스 내부에 추가

• 구현 수정 2

닫기 버튼을 삭제하고 댓글창 버튼을 누르면 다시 닫히도록 수정

function open_box() {
  const reviewBox = document.getElementById("reviewBox");
  const reviewBoxDisplay = localStorage.getItem("reviewBoxDisplay");
  
  if (reviewBoxDisplay === "visible") {
    reviewBox.style.display = "none";
    localStorage.setItem("reviewBoxDisplay", "hidden");
  } else {
    reviewBox.style.display = "block";
    localStorage.setItem("reviewBoxDisplay", "visible");
  }
}

• 구현 수정 3

if 문 대신 switch 문 활용

function open_box() {
  const reviewBox = document.getElementById('reviewBox');
  const reviewBoxDisplay = localStorage.getItem('reviewBoxDisplay');

  switch (reviewBoxDisplay) {
    case 'visible':
      reviewBox.style.display = 'none';
      localStorage.setItem('reviewBoxDisplay', 'hidden');
      break;
    case 'hidden':
    default:
      reviewBox.style.display = 'block';
      localStorage.setItem('reviewBoxDisplay', 'visible');
      break;
  }
}