Global Store

A reactive wrapper around the browser's localStorage. It allows you to persist UI state across page reloads and, uniquely, synchronize that state with your PHP backend automatically.

The Golden Rule: Key Matching

The property name you define in the JavaScript object must exactly match the property you access in PHP.

Frontend (JS) store.setState({ <span class="text-chart-2 font-bold underline">theme</span>: 'dark' }, true)

Backend (PHP) Request::$localStorage->theme

If you save themeMode in JS, accessing theme in PHP will be null.

Real World Example: Theme Manager

This example demonstrates a full-stack preference system.

1
PHP reads the preference immediately on load to prevent flash-of-wrong-theme.
2
JavaScript updates the local state for instant UI reaction.
3
The syncWithBackend flag persists this choice to the server session for future visits.

Theme Toggle Implementation

<?php
use PP\Request;

// 1. Retrieve value using the EXACT key "theme"
$theme = Request::$localStorage->theme ?? 'light';
?>

<div class="<?= $theme === 'dark' ? 'dark bg-black text-white' : 'bg-white text-black' ?> p-10 rounded-lg transition-colors duration-500">
    
    <div class="flex justify-between items-center">
        <h2 class="text-xl font-bold">Settings</h2>
        
        <button onclick="toggleTheme()" class="p-2 rounded-full hover:bg-white/20">
             <!-- Conditional Icon Rendering -->
             <span class="<?= $theme === 'dark' ? 'hidden' : '' ?>">☀️ Light</span>
             <span class="<?= $theme === 'light' ? 'hidden' : '' ?>">🌙 Dark</span>
        </button>
    </div>

    <p class="mt-4 opacity-80">
        Current Mode: <strong><?= ucfirst($theme) ?></strong>
    </p>
</div>

<script>
    function toggleTheme() {
        const current = store.state.theme || 'light';
        const next = current === 'light' ? 'dark' : 'light';
        
        // 3. Update Store with "theme" key AND sync
        store.setState({
            theme: next
        }, true); // <--- The "true" enables backend sync
    }
</script>

Managing Data

Reading Values

Access data directly via store.state. This is a proxy object, so it always reflects the latest values.

// Check if a value exists
if (store.state.isLoggedIn) {
    console.log("User is back!");
}

// Access nested data (if you saved an object)
const cartCount = store.state.cart?.length || 0;

Resetting Values

Use resetState to clear specific keys or wipe everything. Pass true to sync the deletion to the server.

// 1. Clear a specific key (and sync deletion)
store.resetState('theme', true);

// 2. Wipe EVERYTHING (Factory Reset)
store.resetState(null, true);

API Reference

Method	Signature	Description
store.state	Object	Read-only access to the current state object. Example: `store.state.theme`
store.setState	(update: Obj, sync: bool)	Merges the `update` object into the current state. If `sync` is true, sends data to backend.
store.resetState	(key?: string, sync: bool)	If `key` is provided, removes that key. If null, clears entire store. Syncs deletion if requested.

Command Palette

Prisma PHP