如何用Session或Cookie保存动态数量Input的选择（刷新/回退页面时）

我来给你捋捋这个问题的解决方案——因为input数量是动态的，硬编码字段肯定行不通，核心思路就是用动态唯一标识来绑定每个input的状态，不管前端本地存储还是后端Session都能适配这个逻辑，给你两个实用的方案：

前端方案：用localStorage/sessionStorage自动存状态 #

这个方案完全不用后端插手，适合不需要把状态同步到服务器的场景，刷新页面、返回都能恢复：

1. 给每个input加唯一标识
   你生成input的时候，利用$questions里的唯一ID（比如每个问题的ID）给input的name或者id带上这个唯一值，比如：

<!-- 复选框示例，绑定问题ID -->
<input type="checkbox" name="question_{{ $question->id }}" id="q_{{ $question->id }}">
<!-- 单选框示例，按问题ID分组 -->
<input type="radio" name="answer_{{ $question->id }}" value="{{ $option->id }}">

2. 写JS监听变化，实时存+页面加载恢复
   一段简单的JS就能搞定，页面加载时先读之前存的状态，然后监听所有input的变化实时保存：

document.addEventListener('DOMContentLoaded', function() {
    // 页面加载时恢复状态
    const savedStates = JSON.parse(localStorage.getItem('inputStates')) || {};
    document.querySelectorAll('#account_details input').forEach(input => {
        const key = input.name || input.id || input.dataset.id;
        if (savedStates[key] === undefined) return;
        
        if (input.type === 'checkbox') {
            input.checked = savedStates[key];
        } else if (input.type === 'radio') {
            input.checked = (input.value === savedStates[key]);
        } else {
            input.value = savedStates[key]; // 文本框等类型直接赋值
        }
    });

    // 监听input变化，实时保存
    document.querySelectorAll('#account_details input').forEach(input => {
        input.addEventListener('change', function() {
            const savedStates = JSON.parse(localStorage.getItem('inputStates')) || {};
            const key = this.name || this.id || this.dataset.id;
            
            if (this.type === 'checkbox') {
                savedStates[key] = this.checked;
            } else if (this.type === 'radio') {
                // 单选框按name分组存选中值
                savedStates[this.name] = this.value;
            } else {
                savedStates[key] = this.value;
            }
            localStorage.setItem('inputStates', JSON.stringify(savedStates));
        });
    });
});

• 用localStorage的话状态会一直留在浏览器，直到手动清除；如果只想在当前会话（关闭浏览器就消失）保存，换成sessionStorage就行。

后端方案：用Session动态存储状态 #

如果需要把状态同步到服务器（比如要和后端业务逻辑结合），可以用Session配合动态数组来存：

1. 给input设置数组格式的name
   生成input时，把name设为数组格式，带上问题ID作为键，这样后端能直接拿到结构化的状态：

<!-- 复选框：name是questions[问题ID] -->
<input type="checkbox" name="questions[{{ $question->id }}]" value="1">
<!-- 单选框：name是answers[问题ID] -->
<input type="radio" name="answers[{{ $question->id }}]" value="{{ $option->id }}">

2. 后端接收并保存到Session
   在控制器里，处理请求（可以是表单提交，也可以是AJAX实时提交）时，把状态存入Session的动态数组：

// 比如表单提交的方法里
if ($request->has(['questions', 'answers'])) {
    // 把input状态存入session的input_states键下
    $inputStates = $request->only(['questions', 'answers']);
    session()->put('input_states', array_filter($inputStates));
}

要是想实时保存（不用等用户点提交），可以给input加change事件，用AJAX把当前状态传给后端更新Session。

3. 页面渲染时从Session恢复状态
   在Blade模板里生成input的时候，判断Session里的对应值，设置选中状态：

<!-- 复选框恢复示例 -->
@foreach($questions as $question)
    <input type="checkbox" 
           name="questions[{{ $question->id }}]" 
           value="1"
           {{ session('input_states.questions.' . $question->id) ? 'checked' : '' }}>
@endforeach

<!-- 单选框恢复示例 -->
@foreach($questions as $question)
    @foreach($question->options as $option)
        <input type="radio" 
               name="answers[{{ $question->id }}]" 
               value="{{ $option->id }}"
               {{ session('input_states.answers.' . $question->id) == $option->id ? 'checked' : '' }}>
    @endforeach
@endforeach

关键注意点 #

• 唯一标识是核心：不管哪种方案，必须保证每个input有唯一的name/id/data-id，不然没法准确对应保存的状态。
• 敏感数据别用localStorage：存在浏览器本地不安全，优先用后端Session。
• 文本框可以监听input事件：比change更实时，输入的时候就保存状态。

内容的提问来源于stack exchange，提问作者Ruka Xing