我有一个包含几个组件的表单：

return (
    <>
      <FormProvider {...methods} >
        <div className="mt-12">
          <form onSubmit={handleSubmit(onSubmit)} action="#" method="POST" >
            <Email/>
            <Personal/>
            <h2 className='font-semibold text-xl'>Geburtsdaten</h2>
            <p className='mb-5 text-gray-400 text-sm'>Du musst mindestens 18 Jahre alt sein, um online einen Vertrag abzuschließen.</p>
            <div className="sm:col-span-2 grid grid-cols-3 gap-4 mb-5">
              <div className="mt-1">
                < SelectBirthYear
                  years={years}
                  value={selectedYear}
                  onChange={setSelectedYear}/>
              </div>
              <div className="mt-1">
                < SelectBirthMonth 
                  startYear={startYear}
                  selectedYear={selectedYear}
                  months={months}
                  value={selectedMonth}
                  reducedMonths={reducedMonths}
                  onChange={monthSelect}/>
              </div>
              <div className="mt-1">
                <SelectBirthDay
                  startYear={startYear}
                  selectedYear={selectedYear}
                  selectedMonth={selectedMonth}
                  monthNow={monthNow}
                  days={days}
                  value={selectedDay}
                  reducedDays={reducedDays}
                  onChange={daySelect}
                />
              </div>
            </div>
            <Contact/>
            <BankDetails/>
            <Checkboxes />
            <div className="sm:col-span-2">
            </div>
            <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-center">
              <div className="rounded-md shadow">
                <a role="button" tabIndex={0}
                  onClick={prevFormStep}
                  className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-500 hover:bg-yallow-600 md:py-4 md:text-lg md:px-10"
                >
                  Zurück
                </a>
              </div>
              <div className="mt-3 sm:mt-0 sm:ml-3">
                <input
                  type='submit'
                  value='Vertrag abschließen'
                  className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-500 hover:bg-yallow-600 md:py-4 md:text-lg md:px-10"
                />
              </div>
            </div>
          </form>
        </div>
        
      </FormProvider>
    </>
  )

对于我的From验证，我已经使用了react-hook-form：

const methods = useForm({ mode: 'onTouched' });
 const { handleSubmit } = methods;

所以现在，查看文档，我看不到在输入更改时持久化值的可能性。在控制台中，我可以访问控件中的_formValues，但在我的应用程序中，我甚至无法管理console.log这些。关于控制，有人说：此对象包含将组件注册到React Hook Form的方法。重要：不要直接访问此对象中的任何属性。仅供内部使用。
我的想法是，如果我可以访问formValues，那么我可以将它们保存到本地存储中。但我还没走到那一步。此外，有一个表单有很多组件，命名每个地方，我希望保存值的每一个变化不会是干的。那么，有没有什么策略可以从我的表单中获取所有值，并将其添加到本地存储中，这样，如果用户出于某种原因重新加载或返回浏览器历史记录，填写的表单仍然存在？