id="persist-toggle-a" data-ln-persist
This section remembers whether it was open or closed. Open it and refresh the page — it will still be open.
Storage key: ln:persist-toggle-a:data-ln-toggle
Overview & How It Works
The ln-persist component is a declarative state persistence decorator applied to elements via data-ln-persist. On page boot, it automatically reads the persisted state from localStorage and applies it directly to the host element's state attribute via setAttribute, immediately restoring user preferences (such as open accordions, active tabs, sort orders, or search queries).
An internal MutationObserver observes the component's state attribute in the DOM: whenever user interaction or code changes that attribute, ln-persist synchronizes the updated value back to localStorage in real-time. By default, keys are global by element ID; adding data-ln-persist-scope="page" automatically scopes persistence to the current URL pathname.
1 — Toggle persistence
Open/close these sections, then refresh. The two persisted toggles restore; the control toggle always resets to closed.
id="persist-toggle-b" data-ln-persist
Independent from Toggle A. Both persist their own state separately.
Storage key: ln:persist-toggle-b:data-ln-toggle
id="no-persist-toggle" — no data-ln-persist
This toggle has no data-ln-persist — it always resets to closed on page refresh. Nothing is written to localStorage.
2 — Accordion persistence
Open one panel and refresh. The same panel reopens — single-open constraint still works after restore.
-
Panel 1 — General settings Content of panel 1. Opening this closes panels 2 and 3.
Storage key:
ln:acc-panel-1:data-ln-toggle -
Panel 2 — Security Content of panel 2. Opening this closes panels 1 and 3.
Storage key:
ln:acc-panel-2:data-ln-toggle -
Panel 3 — Notifications Content of panel 3. Opening this closes panels 1 and 2.
Storage key:
ln:acc-panel-3:data-ln-toggle
3 — Tabs persistence
Switch tabs, refresh. The non-hash tab set restores via localStorage. The hash tab set uses the URL — note the difference.
Non-hash tabs — persists via localStorage
data-ln-persist="persist-settings-tabs" — no id, no hash sync.
General
Switch to Security or Notifications, then refresh — that tab will be restored from localStorage.
Storage key: ln:persist-settings-tabs:data-ln-tabs-active
Security
This tab is active. Refresh the page — Security will still be active.
Notifications
This tab is active. Refresh the page — Notifications will still be active.
Hash tabs — anchor triggers sync to the URL
Anchor triggers (<a href="#…">) switch the group to hash mode. id="hash-tabs-demo" is the URL namespace; no localStorage is written. (Button triggers, by contrast, would persist — see above.)
Alpha
This tab set uses URL hash for state: #hash-tabs-demo:beta. No localStorage is written.
Beta
Active tab is visible in the URL bar. Refresh — hash restores it, not localStorage.
Gamma
Hash format: #hash-tabs-demo:gamma
4 — Table sort persistence
Click a column header to sort, then refresh. The sort column and direction are restored.
data-ln-persist goes on each [data-ln-sort] element individually — persistence is per sort instance, not per table. Give each one a distinct key. These use the independent data-ln-persist-scope="page" attribute so the sorted column is remembered per page rather than globally. Sorting is single-column, so at most one stored key is ever active per instance at a time — sorting a different column clears the previous column's stored key.
|
Name
|
Department
|
Role
|
Salary
|
Start date
|
|---|---|---|---|---|
| Alice Johnson | Engineering | Lead | 95,000 | 01.01.2021 |
| Bob Martinez | Design | Senior | 82,000 | 01.07.2021 |
| Carol White | Engineering | Mid | 74,000 | 01.01.2022 |
| David Lee | Marketing | Senior | 78,000 | 01.07.2022 |
| Eva Novak | Design | Lead | 90,000 | 01.01.2023 |
| Frank Okafor | Engineering | Senior | 88,000 | 01.07.2023 |
| Grace Park | Marketing | Mid | 69,000 | 01.01.2024 |
Storage key: ln:name-sort:{path}:data-ln-sort-state — value: "asc" (plain string, not a JSON object)
5 — Filter persistence
Check one or more filters, then refresh. The selected values are restored and the list is filtered.
- Alice Johnson — Active
- Bob Martinez — Pending
- Carol White — Active
- David Lee — Archived
- Eva Novak — Pending
- Frank Okafor — Active
- Grace Park — Archived
Storage key: ln:persist-filter:data-ln-filter-values — value: "active" (or "active,pending")
6 — Debug tools
Inspect and clear all ln:* localStorage keys written by persist integrations on this page.
(click "Show localStorage" to inspect)
What each component stores
| Component | Key pattern | Example value |
|---|---|---|
| ln-toggle | ln:{id}:data-ln-toggle | "open" or "close" |
| ln-tabs | ln:{id}:data-ln-tabs-active | "security" |
| ln-sort | ln:{id}:{path}:data-ln-sort-state (via data-ln-persist-scope="page") | "desc" |
| ln-filter | ln:{id}:data-ln-filter-values | "active" |