用户刷新页面时如何保留Livewire向导组件的已提交步骤数据？

以下是两种可直接落地的实现方案，可根据业务场景选择： #

方案1：服务端Session持久化（适合敏感数据） #

Livewire 2.x及以上版本内置了属性持久化能力，不需要写额外前端代码，直接在组件中声明要保留的属性即可，数据会自动存在服务端Session中，刷新页面不会丢失。
示例代码：

<?php

namespace App\Livewire;

use Livewire\Component;

class Wizard extends Component
{
    // 在这里填写所有需要跨刷新保留的属性名
    protected $persist = ['current_step', 'form_data'];
    
    public int $current_step = 1;
    public array $form_data = [];

    // 原有下一步、校验逻辑不需要修改
    public function nextStep()
    {
        // 校验逻辑
        $validated = $this->validate([
            // 你的校验规则
        ]);
        $this->form_data = array_merge($this->form_data, $validated);
        $this->current_step++;
    }

    public function render()
    {
        return view('livewire.wizard');
    }
}

如果使用的是不支持$persist的旧版本Livewire，手动在mount方法读取Session、属性更新时写入Session即可实现相同效果。 #

方案2：前端localStorage持久化（和你Vue项目的实现逻辑一致，适合非敏感数据） #

如果需要兼容游客场景、或者要和之前Vue项目的存储逻辑对齐，可以用localStorage结合Livewire的前端钩子实现，不需要额外安装扩展：

1. 首先在向导组件的Blade模板中添加JS逻辑：

document.addEventListener('livewire:init', () => {
    // 页面加载时从localStorage读取缓存同步到Livewire组件
    const savedWizardData = localStorage.getItem('wizard_data');
    if (savedWizardData) {
        Livewire.dispatch('sync-wizard-cache', {data: JSON.parse(savedWizardData)});
    }

    // 监听组件数据更新，同步写入localStorage
    Livewire.on('wizard-data-changed', (event) => {
        localStorage.setItem('wizard_data', JSON.stringify(event.data));
    });
});

2. 在Livewire组件中添加对应事件处理逻辑：

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\On;

class Wizard extends Component
{
    public int $current_step = 1;
    public array $form_data = [];

    // 接收前端同步的缓存数据
    #[On('sync-wizard-cache')]
    public function loadCache($data)
    {
        $this->current_step = $data['current_step'] ?? 1;
        $this->form_data = $data['form_data'] ?? [];
    }

    // 监听属性更新，通知前端存缓存
    public function updated($name, $value)
    {
        $this->dispatch('wizard-data-changed', data: [
            'current_step' => $this->current_step,
            'form_data' => $this->form_data
        ]);
    }

    // 原有业务逻辑不变，提交完成后可以加清除缓存的逻辑
    public function submit()
    {
        // 提交逻辑...
        // 提交完成后清除本地缓存
        $this->dispatch('clear-wizard-cache');
    }
}

注意事项 #

• 敏感类数据不要使用localStorage存储，存在XSS窃取风险，优先选择服务端Session方案
• 向导提交完成后记得对应清除存储的缓存，避免用户下次进入向导还显示旧数据

内容的提问来源于stack exchange，提问作者Petro Gromovo