How do you save the state of a form (draft) upon page reload?

To preserve the state of a form (draft) when the page is reloaded, you can use the Web Storage API — localStorage or sessionStorage.

Example in JavaScript:

const form = document.querySelector('form');
const input = form.querySelector('input[name="text"]');

// Load saved value on page load
window.addEventListener('load', () => {
  const saved = localStorage.getItem('formDraft');
  if (saved) {
    input.value = saved;
  }
});

// Save value on change
input.addEventListener('input', () => {
  localStorage.setItem('formDraft', input.value);
});

// Clear the draft on form submission
form.addEventListener('submit', () => {
  localStorage.removeItem('formDraft');
});

This approach saves data in the browser and allows it to be restored after a page reload.