Store data in localStorage

I need this page to remember the user's draft between visits. Save the current form object as JSON under key draftProfile in localStorage whenever the user blurs a field or clicks Save. Before writing, read draftProfile, merge incoming values so we don't wipe unset fields, and only write if something actually changed. On write, also set lastSavedDraft to an ISO timestamp for audit.

Before I wire this up to the client's browser, make the draft easy to recover and inspect. Surface a clear message when a draft exists, show the lastSavedDraft timestamp at the top, and put a Recover draft button that loads values without overwriting anything the user has changed in the current session. Flag fields that are missing from the draft versus the form schema so a reviewer doesn't think data silently disappeared.

I closed the settings tab after entering about half the profile. I reopened and the form is empty. I checked localStorage and found draftProfile present but not populating the form. Priya on support will blame our save logic. What's the likely cause — JSON mismatch, key name typo, or merge strategy — and what's the smallest fix I should try first to restore drafts without losing users' current input?

Across several sprints we keep getting bug reports: users lose partially completed forms or see stale drafts. Each fix is a quick patch and the problem returns. Which habit should we change to stop this cycle? Propose a single checklist item and one small architectural change that would prevent accidental overwrite and make recovery reliable.