혼공 JS 7장

김동현·2022년 12월 10일

javascript

목록 보기
30/33

localStorage.getItem (키) : 저장된 값을 추출 / 없으면 undefined / 객체의 속성을 추출하는 일반적인 형태로 localStorage.키 or localStoreage[키]

localStorage.setItem (키,값) : 값을 저장

localStorage.removeItem (키) : 특정 키의 값을 제거

localStorage.clear() : 저장된 모든 값을 제거

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const p = document.querySelector("p");
    const input = document.querySelector("input");
    const button = document.querySelector("button");

    const saveValue = localStorage.getItem("input");
    if (saveValue) {
      input.value = saveValue;
      p.textContent = `이전 실행 때의 마지막 값 : ${saveValue}`;
    }
    input.addEventListener("keyup", (event) => {
      const value = event.currentTarget.value;
      localStorage.setItem("input", value);
    });

    button.addEventListener("click", (event) => {
      localStorage.clear();
      input.value = "";
    });
  });
</script>
<body>
  <p></p>
  <button></button>
  <input type="text" />
</body>
profile
꺽이지 않는 마음

0개의 댓글