BOM을 활용한 브라우저의 자동 입력 기능 구현

13 Oct 2023

브라우저의 자동 입력 기능은 사용자가 이전에 입력한 정보를 기억하여 다음에 동일한 입력을 할 때 자동으로 채워주는 기능입니다. 이 기능은 사용자 경험을 향상시키는데 도움이 되며, 웹 개발자들은 이를 구현하기 위해 BOM(Browser Object Model)을 사용할 수 있습니다.

1. BOM의 localStorage 활용

BOM의 localStorage는 브라우저에 데이터를 저장할 수 있는 기능을 제공합니다. 이를 활용하여 사용자의 입력 정보를 저장하고, 다음에 페이지를 열었을 때 저장된 정보를 불러와 자동으로 입력하게 할 수 있습니다.

// 사용자의 입력 정보를 localStorage에 저장하기
function saveFormData() {
  var inputElement = document.getElementById('input');
  var userInput = inputElement.value;
  localStorage.setItem('formData', userInput);
}

// 페이지가 로드될 때 localStorage에 저장된 정보를 불러와 자동으로 입력하기
function loadFormData() {
  var inputElement = document.getElementById('input');
  var savedData = localStorage.getItem('formData');
  if (savedData) {
    inputElement.value = savedData;
  }
}

// 페이지 로드 시 자동으로 실행할 함수 등록하기
window.addEventListener('load', loadFormData);

// 입력 값이 변경될 때마다 저장하는 함수 등록하기
var inputElement = document.getElementById('input');
inputElement.addEventListener('input', saveFormData);

위의 예제 코드에서 saveFormData 함수는 사용자의 입력 값을 localStorage에 저장하고, loadFormData 함수는 페이지가 로드될 때 저장된 정보를 불러와 입력 필드에 자동으로 입력해줍니다. 또한, 입력 값이 변경될 때마다 saveFormData 함수가 호출되어 입력 데이터가 실시간으로 저장됩니다.

2. BOM의 sessionStorage 활용

BOM의 sessionStorage는 브라우저에 임시로 데이터를 저장할 수 있는 기능을 제공합니다. localStorage와 마찬가지로 사용자의 입력 정보를 저장하고, 같은 세션 내에서 페이지를 이동하거나 새로고침할 때 저장된 정보를 불러와 자동으로 입력할 수 있습니다.

// 사용자의 입력 정보를 sessionStorage에 저장하기
function saveFormData() {
  var inputElement = document.getElementById('input');
  var userInput = inputElement.value;
  sessionStorage.setItem('formData', userInput);
}

// 페이지가 로드될 때 sessionStorage에 저장된 정보를 불러와 자동으로 입력하기
function loadFormData() {
  var inputElement = document.getElementById('input');
  var savedData = sessionStorage.getItem('formData');
  if (savedData) {
    inputElement.value = savedData;
  }
}

// 페이지 로드 시 자동으로 실행할 함수 등록하기
window.addEventListener('load', loadFormData);

// 입력 값이 변경될 때마다 저장하는 함수 등록하기
var inputElement = document.getElementById('input');
inputElement.addEventListener('input', saveFormData);

위의 예제 코드에서 saveFormData 함수는 사용자의 입력 값을 sessionStorage에 저장하고, loadFormData 함수는 페이지가 로드될 때 저장된 정보를 불러와 입력 필드에 자동으로 입력해줍니다. localStorage와 달리 sessionStorage는 페이지 세션이 유지되는 동안에만 데이터를 저장하기 때문에, 새로고침하거나 다른 세션으로 이동할 경우 저장된 정보는 사라지게 됩니다.

마무리

위에서 설명한 방법을 사용하면 BOM을 활용하여 브라우저의 자동 입력 기능을 구현할 수 있습니다. 이를 활용하여 사용자가 편하게 입력할 수 있도록 도와주는 웹 애플리케이션을 구현할 수 있습니다. 자세한 내용은 MDN 문서, W3Schools에서 확인할 수 있습니다.

#BOM #자동입력