Persisted State

State stored across sessions.

html

<div class="pst pst--localStorage">
  <code class="pst__code">localStorage.setItem(&quot;theme&quot;, &quot;dark&quot;)</code>
  <p class="pst__row"><span>closes tab, reopens later</span><strong class="pst__yes" style="color:#A8E6C1;">survives</strong><strong class="pst__no">lost</strong></p>
  <p class="pst__row"><span>closes this tab only</span><strong class="pst__yes2" style="color:#A8E6C1;">survives</strong><strong class="pst__no2">lost</strong></p>
</div>
<style>
.pst { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.pst__code { display: block; font: 11px ui-monospace, monospace; background: #24143012; padding: 8px 10px; border-radius: 6px; margin-bottom: 12px; word-break: break-all; }
.pst__row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #24143014; }
.pst__yes, .pst__yes2, .pst__no, .pst__no2 { display: none; font-size: 11px; }
.pst--localStorage .pst__yes, .pst--localStorage .pst__yes2 { display: inline; }
.pst--sessionStorage .pst__no, .pst--sessionStorage .pst__yes2 { display: inline; }
.pst--memory-only .pst__no, .pst--memory-only .pst__no2 { display: inline; }
</style>

tailwind

<div class="psttw psttw--localStorage font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <code class="block font-mono text-[11px] bg-[#24143012] py-2 px-2.5 rounded-md mb-3 break-all">localStorage.setItem(&quot;theme&quot;, &quot;dark&quot;)</code>
  <p class="flex justify-between items-center py-1.5 border-b border-[#24143014]"><span>closes tab, reopens later</span><strong class="psttw__yes hidden text-[11px]" style="color:#A8E6C1;">survives</strong><strong class="psttw__no hidden text-[11px]">lost</strong></p>
  <p class="flex justify-between items-center py-1.5"><span>closes this tab only</span><strong class="psttw__yes2 hidden text-[11px]" style="color:#A8E6C1;">survives</strong><strong class="psttw__no2 hidden text-[11px]">lost</strong></p>
</div>
<style>
.psttw--localStorage .psttw__yes, .psttw--localStorage .psttw__yes2 { display: inline; }
.psttw--sessionStorage .psttw__no, .psttw--sessionStorage .psttw__yes2 { display: inline; }
.psttw--memory-only .psttw__no, .psttw--memory-only .psttw__no2 { display: inline; }
</style>

react

export function PersistedState({
  storageKey = "theme",
  value = "dark",
  storageType = "localStorage",
  accent = "#A8E6C1",
}) {
  const acrossSessions = storageType === "localStorage";
  const withinTab = storageType === "localStorage" || storageType === "sessionStorage";
  const cell = (ok) => <strong style={{ fontSize: 11, color: ok ? accent : "#241430" }}>{ok ? "survives" : "lost"}</strong>;
  return (
    <div style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <code style={{ display: "block", fontFamily: "ui-monospace, monospace", fontSize: 11, background: "#24143012", padding: "8px 10px", borderRadius: 6, marginBottom: 12, wordBreak: "break-all" }}>{storageType}.setItem("{storageKey}", "{value}")</code>
      <p style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "6px 0", borderBottom: "1px solid #24143014" }}><span>closes tab, reopens later</span>{cell(acrossSessions)}</p>
      <p style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "6px 0" }}><span>closes this tab only</span>{cell(withinTab)}</p>
    </div>
  );
}