用react+typescript实现 浏览器刷新后保存表单搜索组件状态

要实现浏览器刷新后保存表单搜索组件状态，可以使用浏览器的 `localStorage` 存储数据。具体实现方法如下：

1. 在表单搜索组件中，定义一个状态用来存储表单的搜索条件，例如：

const [formData, setFormData] = useState({
  keyword: '',
  category: ''
});

2. 在表单搜索组件中，监听表单值的变化，当表单值发生变化时，更新 `formData` 状态的值。例如：

const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  setFormData({
    ...formData,
    [event.target.name]: event.target.value
  });
};

3. 在表单搜索组件中，使用 `useEffect` 钩子函数来监听页面的加载事件，当页面加载完成后，从 `localStorage` 中获取之前存储的表单搜索条件，如果有数据，则将数据设置为 `formData` 的初始值。例如：

useEffect(() => {
  const savedFormData = localStorage.getItem('formData');
  if (savedFormData) {
    setFormData(JSON.parse(savedFormData));
  }
}, []);

4. 在表单搜索组件中，监听 `formData` 状态的变化，当 `formData` 发生变化时，将 `formData` 的值存储到 `localStorage` 中。例如：

useEffect(() => {
  localStorage.setItem('formData', JSON.stringify(formData));
}, [formData]);

通过以上实现，即可实现浏览器刷新后保存表单搜索组件状态的功能。