이번에는 입력 폼에서 입력된 값을 저장하고 불러오는 방법에 대해 알아보겠습니다. JavaScript를 사용하여 간단한 예제를 통해 이에 대해 설명하겠습니다.

입력 폼에서 값 저장하기

먼저, 입력 폼에서 값이 입력되면 이를 저장하는 방법을 알아보겠습니다. 아래는 HTML에서 입력 폼과 버튼을 포함한 예제 코드입니다.

<form>
  <input type="text" id="inputValue">
  <button onclick="saveValue()">Save</button>
</form>

위의 코드에서는 input 요소에 값을 입력하고, ‘Save’ 버튼을 클릭하면 saveValue 함수가 호출됩니다.

이제 JavaScript에서 saveValue 함수를 만들어 입력된 값을 저장해보겠습니다.

function saveValue() {
  const inputValue = document.getElementById('inputValue').value;
  localStorage.setItem('savedValue', inputValue);
}

위의 코드에서, saveValue 함수는 input 요소에서 값을 가져와서 localStorage에 savedValue라는 키로 저장합니다.

저장된 값 불러오기

이제 저장된 값을 불러오는 방법에 대해 알아보겠습니다. 아래는 값을 불러오고 화면에 표시하는 JavaScript 코드입니다.

document.addEventListener('DOMContentLoaded', function() {
  const savedValue = localStorage.getItem('savedValue');
  if (savedValue) {
    document.getElementById('inputValue').value = savedValue;
  }
});

위의 코드에서는 문서가 로드될 때(DOMContentLoaded 이벤트) localStorage에서 저장된 값을 가져와서, 있다면 input 요소에 표시합니다.

이제 위의 예제 코드를 사용하여 입력 폼에서 값을 저장하고 불러오는 방법을 알아보았습니다. 이를 참고하여 실제 웹 애플리케이션에서 유용하게 활용해보시기 바랍니다.

자세한 내용은 Mozilla Developer Network의 자료를 참고하시기 바랍니다.