Session Storage Draft - JavaScript Client

A draft message is restored from sessionStorage and updated as the user types in a textarea.

Program

sessionStorage works like localStorage but is scoped to one browser tab. It is useful for temporary drafts and wizard progress.

session_storage_draft.html

<textarea id="note">Deploy at noon</textarea>
<output id="status">Not saved</output>
<script>
  const note = document.querySelector("#note");
  const status = document.querySelector("#status");
  note.value = sessionStorage.getItem("draft") || note.value;
  status.textContent = "Draft restored";
  note.addEventListener("input", () => {
    sessionStorage.setItem("draft", note.value);
    status.textContent = "Draft saved";
  });
</script>

sessionStorage sessionStorage stores string values for one top-level browser tab.

input event The input event fires whenever a form control value changes.