Livewire Session Properties for Persistent Component State

Maintaining component data across page refreshes becomes straightforward with Livewire's session properties. This feature stores component state in the user's session automatically, eliminating the need for manual session handling.

Session properties in Livewire store component data in the user's session using a simple attribute annotation. The #[Session] attribute handles session storage and retrieval automatically.

use Livewire\Component;
use Livewire\Attributes\Session;
 
class ProductFilter extends Component
{
    #[Session]
    public $category = '';
 
    #[Session]
    public $priceRange = [];
 
    public function applyFilters()
    {
        $this->dispatch('filters-updated');
    }
 
    public function render()
    {
        return view('livewire.product-filter');
    }
}

The #[Session] attribute manages all session operations internally. When a user applies filters and refreshes the page, their selections persist without additional implementation.

An e-commerce checkout process demonstrates how session properties maintain cart state throughout the shopping workflow:

use Livewire\Component;
use Livewire\Attributes\Session;
 
class ShoppingCart extends Component
{
    #[Session]
    public $items = [];
 
    #[Session]
    public $shippingMethod = 'standard';
 
    #[Session]
    public $couponCode = '';
 
    public function addItem($productId, $quantity = 1)
    {
        $this->items[$productId] = [
            'quantity' => $quantity,
            'price' => Product::find($productId)->price,
        ];
    }
 
    public function updateShipping($method)
    {
        $this->shippingMethod = $method;
        $this->calculateTotals();
    }
 
    public function applyCoupon()
    {
        if ($this->validateCoupon($this->couponCode)) {
            $this->dispatch('coupon-applied');
        }
    }
 
    protected function calculateTotals()
    {
        return collect($this->items)->sum(fn($item) => $item['price'] * $item['quantity']);
    }
 
    public function render()
    {
        return view('livewire.shopping-cart', [
            'total' => $this->calculateTotals(),
        ]);
    }
}

Session properties support custom keys for more control over storage organization:

use Livewire\Component;
use Livewire\Attributes\Session;
 
class UserPreferences extends Component
{
    #[Session(key: 'user-theme')]
    public $theme = 'light';
 
    #[Session(key: 'dashboard-layout')]
    public $layout = 'grid';
 
    public function switchTheme()
    {
        $this->theme = $this->theme === 'light' ? 'dark' : 'light';
    }
 
    public function render()
    {
        return view('livewire.user-preferences');
    }
}

Dynamic session keys enable context-aware storage based on component properties:

use Livewire\Component;
use Livewire\Attributes\Session;
use App\Models\Project;
 
class ProjectSettings extends Component
{
    public Project $project;
 
    #[Session(key: 'project-settings-{project.id}')]
    public $configuration = [];
 
    public function mount(Project $project)
    {
        $this->project = $project;
    }
 
    public function updateConfiguration($key, $value)
    {
        $this->configuration[$key] = $value;
    }
 
    public function render()
    {
        return view('livewire.project-settings');
    }
}

This approach creates unique session keys for each project, preventing configuration conflicts when users work with multiple projects.

Session properties maintain component state through page refreshes and browser navigation. The automatic persistence removes friction from multi‑step processes while providing developers with a maintainable solution for state management.