Web Storage
Keep a draft in one tab
Use sessionStorage for an unfinished editor draft that belongs to one tab and disappears with its page session.
8 minute lesson
A draft can survive reload without becoming permanent application data. sessionStorage gives us that middle ground.
sessionStorage uses the same string API as localStorage, but it is scoped by origin and top-level tab. A reload keeps the page session. Closing the tab normally ends it.
const draftKey = 'field-notes:draft'
editor.value = sessionStorage.getItem(draftKey) ?? ''
editor.addEventListener('input', () => {
sessionStorage.setItem(draftKey, editor.value)
})Opening another tab creates a separate page session. Duplicating a tab may begin with a copy, but later changes do not create one shared draft. Test the browsers you support.
Remove the draft after a successful save. Otherwise an old recovery value can overwrite or confuse newer saved content.
Type a draft, reload, open a second tab, and close the first tab. Record exactly where the draft appears, then clear it after simulating a successful note save.
Lesson completed