양식 데이터 손실 없이 HTML에서 현재 페이지를 새로고침하는 방법

양식 데이터를 유지하면서 페이지 새로고침하기

웹 개발을 하다 보면 페이지를 새로고침해야 하는 상황에서 사용자가 입력한 양식(form) 데이터가 모두 사라지는 문제를 겪게 됩니다. 이를 해결하는 가장 간단한 방법은 웹 스토리지(WebStorage)를 활용하는 것입니다.

웹 스토리지는 두 가지 유형으로 제공됩니다.

• localStorage — 브라우저를 닫아도 데이터가 유지되는 영구 저장소
• sessionStorage — 웹 브라우저가 닫힐 때까지 메모리에 유지되는 세션 기반 저장소

1. 페이지 새로고침 전에 데이터 저장하기

페이지가 새로고침되기 직전에 window.onbeforeunload 이벤트를 사용해 입력된 값을 localStorage에 저장합니다.

window.onbeforeunload = function() {
    localStorage.setItem(name, $('#inputName').val());
    localStorage.setItem(phone, $('#inputPhone').val());
    localStorage.setItem(subject, $('#inputAddress').val());
}

2. 페이지 로드 시 저장된 데이터 복원하기

페이지가 다시 로드될 때 window.onload 이벤트에서 저장된 값을 가져와 입력 필드에 복원합니다.

window.onload = function() {
    var name = localStorage.getItem(name);
    var phone = localStorage.getItem(phone);
    if (name !== null) $('#inputName').val(name);
    if (phone !== null) $('#inputPhone').val(phone);
    // ...
}

추가 팁

새로고침 후 데이터 복원이 완료되었다면, 불필요한 저장 값은 localStorage.removeItem(key) 또는 localStorage.clear()로 정리하는 것이 좋습니다. 또한 민감한 정보(비밀번호, 개인정보 등)는 localStorage에 저장하지 않도록 주의해야 합니다. 임시로만 유지하고 싶다면 sessionStorage를 사용하면 브라우저 종료 시 자동으로 삭제되어 더 안전합니다.