Storage

Keep a string value across page reloads with storage(), saved in localStorage.

Async values come from the network. Some values belong to the reader instead, like a theme choice. They must survive a reload.

storage() is string state that saves itself in the browser’s localStorage. Each change also writes a data- attribute on <html>, so your CSS can follow it.

Click the theme button in the figure.

Where does a saved value go when it changes?

Press Theme: light a few times. Watch the three places that change.

The pageTry it

ThemeToggle

Saved in the browser's localStorage

Press the button in the page.

The page's <html> tag

Press the button in the page.

Your code: ThemeToggle.tsrx

import { storage } from '@markless/core'; let theme = storage('theme', 'light'); (saved as theme) export default function ThemeToggle() @{  <button onClick={() => theme = theme === 'light' ? 'dark' : 'light'}>Theme: {theme}</button>}

What Markless did

ranRan your component once, to set up the page.

Simplified. This figure saves nothing in your real browser. The dark colors come from your own CSS rule on [data-theme="dark"]. What a reader sees after a reload depends on how the page renders. See “Before the first paint” below.

Notice that one change updates three places: the text, the saved value, and the <html> attribute.

import { storage } from '@markless/core';

let theme = storage('theme', 'light');

export default function ThemeToggle() @{
	<button onClick={() => theme = theme === 'light' ? 'dark' : 'light'}>Theme: {theme}</button>
}

Here the key is theme, and <html> gets data-theme. Style the dark theme with [data-theme="dark"] in CSS.

You can call storage() at the top of a file, as above, or inside a component.

One argument or two

Call	`localStorage` key	Attribute on `<html>`
`storage('theme', 'light')`	`theme`	`data-theme`
`let theme = storage('light')`	`markless:theme`	`data-markless-theme`

With one argument, that argument is the starting value. Markless builds the key from the variable name.

Before the first paint

When a server renders the page, Markless adds one small script before the page content. It reads the saved value and sets the <html> attribute first. So CSS that targets data-theme is right from the first paint.

Declare it with let to change it. A const storage value is read-only.

Next: How do these components become pages with real URLs? Routing →