Persistent browser state as slices

local-storage reads one same-origin localStorage key into a named slice. A slice change writes the value back, while live also observes later writes to that key so independent component instances remain synchronized.

Browser storage contains strings. The type attribute parses text, number, date, time, or datetime-local values; an invalid value becomes null. JSON enters the shared CEM-ML importer as a native document. Invalid JSON leaves the raw key unchanged, clears the native slice, and reports a diagnostic. An authored value is authoritative; JSON validates it before writing. Omit it when a stored value must survive reloads.

JSON edits construct replacement CEM nodes without modifying the imported tree. Native exports preserve key order, duplicate keys, and exact number text. A native JSON null writes null; an empty slice removes the key. Click the plain HTML buttons to call localStorage.setItem() or removeItem(), then watch the CEM-ML slice output change. These buttons represent an independent storage writer. The runtime observes same-page Storage API calls and other-tab storage events; the DCE owns the slice and renders its value without a JavaScript UI helper.

Defaults are seeded only for missing demo keys on page load. Reload this demo to check persistence, or open it in another same-origin tab to try live synchronization. Clearing a key affects only that example; an empty string is still a stored value.

Storage is synchronous, origin-scoped, and visible to page scripts. Keep values small and do not use it for secrets or authoritative server data.

See also

Slice declarations and event bindings

DOM merge during live control updates

Forms and declarative input state