# State Management

## Application Counter

This counter is shared across **all browsers and all sessions** — every visitor, in any browser, sees and increments the exact same value (unlike the per-browser session counter below). Use **w-set** to mutate application state declaratively from HTML.

```html
<button w-set="app.app_counter += 1">+1</button>
```

Application data persists across all sessions and is stored server-side. Atomic read-modify-write prevents race conditions under concurrent access.

## Wired Counter (Real-time)

This counter updates in real time across **all connected browsers** via WebSocket. Open this page in two tabs or two browsers and watch them stay in sync.

```html
<button w-set="wired.wired_counter += 1">+1</button>
<span>19</span>
```

Wired state is like application state, but pushes updates to every connected client instantly. No WebSocket code needed — just use `wired.*` in your `w-set` attribute.

## Session Counter

This counter is private to **this browser**. Open the page in a different browser (or a private/incognito window) and you'll get a separate count — it's tied to your session cookie, not shared. Contrast with the application counter above, which is the same for everyone.

```html
<button w-set="session.counter += 1">+1</button>
```

Session data is tied to your browser session and resets when the session expires.

## Session Variables

Template variables like have direct access to session state. These are automatically wrapped with reactive bindings for live updates.

Session Counter Value

Session ID

`c970f56e5e5083ed0cefc79ea28c38555c50f1e07cb77515ad1009f2cb6e04fda23ed839678ddfe2db4537ff71201863f52cb697587f1e2e7a9910f5469e42c1`

Session variables update reactively when their values change on the server.

## Clear Session Data

Reset all session-specific data, including counters and any stored session variables.

**Clear Session Data**

### Source

```
Loading...
```
