Persist#
Component <neo-persist> is a behavioural primitive that snapshots properties of the element it targets (via for, or its first child by default) to Web Storage on the listed events and restores them on connect. Renders as display: contents so the wrapped child stays a direct flex / grid item of its parent.
Reference#
| Name | Type | Default | Description |
|---|---|---|---|
key | string | none | Web Storage key. Required. |
props | string | none | Whitespace-separated property names to persist. |
on | string | none | Whitespace-separated events that trigger a snapshot. |
for | string | none | Target element id. Defaults to first child. |
session | boolean | false | Use sessionStorage instead of localStorage. |
| Name | Description |
|---|---|
| default | Target element. Extras are warned and ignored. |
Examples#
Scroll position (localStorage)#
The simplest case. Snapshots scrollTop on every scroll event into localStorage under the configured key, then restores it on the next connect. The site sidebar uses the same wiring.
Line 1 of fifty. Scroll, leave, return.
Line 2 of fifty. Scroll, leave, return.
Line 3 of fifty. Scroll, leave, return.
Line 4 of fifty. Scroll, leave, return.
Line 5 of fifty. Scroll, leave, return.
Line 6 of fifty. Scroll, leave, return.
Line 7 of fifty. Scroll, leave, return.
Line 8 of fifty. Scroll, leave, return.
Line 9 of fifty. Scroll, leave, return.
Line 10 of fifty. Scroll, leave, return.
Line 11 of fifty. Scroll, leave, return.
Line 12 of fifty. Scroll, leave, return.
Line 13 of fifty. Scroll, leave, return.
Line 14 of fifty. Scroll, leave, return.
Line 15 of fifty. Scroll, leave, return.
Line 16 of fifty. Scroll, leave, return.
Line 17 of fifty. Scroll, leave, return.
Line 18 of fifty. Scroll, leave, return.
Line 19 of fifty. Scroll, leave, return.
Line 20 of fifty. Scroll, leave, return.
Line 21 of fifty. Scroll, leave, return.
Line 22 of fifty. Scroll, leave, return.
Line 23 of fifty. Scroll, leave, return.
Line 24 of fifty. Scroll, leave, return.
Line 25 of fifty. Scroll, leave, return.
Line 26 of fifty. Scroll, leave, return.
Line 27 of fifty. Scroll, leave, return.
Line 28 of fifty. Scroll, leave, return.
Line 29 of fifty. Scroll, leave, return.
Line 30 of fifty. Scroll, leave, return.
Line 31 of fifty. Scroll, leave, return.
Line 32 of fifty. Scroll, leave, return.
Line 33 of fifty. Scroll, leave, return.
Line 34 of fifty. Scroll, leave, return.
Line 35 of fifty. Scroll, leave, return.
Line 36 of fifty. Scroll, leave, return.
Line 37 of fifty. Scroll, leave, return.
Line 38 of fifty. Scroll, leave, return.
Line 39 of fifty. Scroll, leave, return.
Line 40 of fifty. Scroll, leave, return.
Line 41 of fifty. Scroll, leave, return.
Line 42 of fifty. Scroll, leave, return.
Line 43 of fifty. Scroll, leave, return.
Line 44 of fifty. Scroll, leave, return.
Line 45 of fifty. Scroll, leave, return.
Line 46 of fifty. Scroll, leave, return.
Line 47 of fifty. Scroll, leave, return.
Line 48 of fifty. Scroll, leave, return.
Line 49 of fifty. Scroll, leave, return.
Line 50 of fifty. Scroll, leave, return.
Textarea draft (sessionStorage)#
Passing session switches the backing store to sessionStorage, scoping the snapshot to the current tab. Type a draft, reload the page, and it comes back; close the tab and it's gone.
Multiple properties#
Value plus the user-resized size (style.width / style.height) on the <neo-textarea> host. Property names accept dot paths, so nested fields like style.width are snapshotted directly. The childless <neo-persist for="…"> form targets an existing element by id rather than wrapping it.
Video#
Persists currentTime, volume, and muted, so the player resumes where the viewer left off with the same volume and mute state. Source: Sintel trailer (Blender, CC BY 3.0).