如何让日期字段在刷新或跳转页面后保留旧输入值？

当然有办法实现！我来给你拆解几种适配不同场景的解决方案，先说说你当前写法的局限，再给出具体优化方案：

一、你当前写法的局限 #

你用的{{ old('to_date') }}是Laravel框架里的辅助函数，它只在表单POST提交且验证失败的场景下会保留输入值。如果是直接刷新页面、或者通过分页链接跳转到其他页面（通常是GET请求），这个值就会丢失，所以需要额外处理。

二、后端框架（以Laravel为例）优化方案 #

如果你的项目基于Laravel，可以结合请求参数和会话（Session）来实现跨页面/刷新保留值：

1. 在控制器中处理参数存储 #

当用户提交或选择日期后，把日期参数存入会话，确保分页或刷新时能读取到：

public function yourControllerMethod(Request $request)
{
    // 如果请求中存在to_date参数，存入session
    if ($request->has('to_date')) {
        $request->session()->put('filter_to_date', $request->to_date);
    }

    // 分页时附加日期参数（确保分页链接带to_date）
    $data = YourModel::query()
        // 这里可以根据to_date过滤数据
        ->when($request->to_date, function($query) use ($request) {
            $query->where('created_at', '<=', $request->to_date);
        })
        ->paginate(10)
        ->appends(['to_date' => $request->to_date ?? session('filter_to_date')]);

    return view('your-view', compact('data'));
}

2. 视图中优先读取合适的数据源 #

在输入框中，优先读取当前请求的to_date参数，其次是会话中的值，最后才是old()值：

<input type="date" id="to_date" name="to_date" value="{{ request('to_date') ?? session('filter_to_date') ?? old('to_date') }}">

三、纯前端解决方案（适配所有框架） #

如果不想依赖后端处理，或者你的场景是纯前端页面，可以用浏览器的localStorage或sessionStorage来存储日期值：

1. 代码实现 #

// 页面加载完成后，恢复保存的日期值
document.addEventListener('DOMContentLoaded', function() {
    const dateInput = document.getElementById('to_date');
    const savedDate = localStorage.getItem('persisted_to_date');
    
    if (savedDate) {
        dateInput.value = savedDate;
    }
});

// 当日期输入变化时，保存到localStorage
document.getElementById('to_date').addEventListener('change', function() {
    localStorage.setItem('persisted_to_date', this.value);
});

2. 存储方式选择 #

• 用localStorage：值会永久保存在浏览器中，即使用户关闭浏览器再打开，值依然存在；
• 用sessionStorage：值只在当前浏览器会话中有效，关闭标签页或浏览器后会自动清除。

根据你的业务需求选择对应的存储方式即可。

内容的提问来源于stack exchange，提问作者KaungKhant Zaw