Zenn
Closed1

【Next.js react-hook-form localStorage】フォームデータをローカルストレージへ保存する方法

Next.js
React Hook Form
#
localstorage
hirohiro

何について書く？

  • フォームデータをローカルストレージへ保存する方法

内容

-結論：どのように実現するか？？

import { FormControl, Grid, TextField } from '@material-ui/core'
import React, { useEffect } from 'react'
import { useForm } from 'react-hook-form'


const Form = () => {

  const { register, handleSubmit, errors, reset, setValue } = useForm({
    mode: 'all',
  })

  const submit = (formData) => {
    console.log(formData)
    localStorage.setItem('form', JSON.stringify(formData))
    reset()
  }

  useEffect(() => {
    const defaultValue = JSON.parse(localStorage.getItem('form'))
    setValue('test', defaultValue?.test)
  }, []
  )

  return (
    <form onSubmit={handleSubmit(submit)}>
      <Grid container direction="column">
        <Grid item sm={12} >
          <FormControl fullWidth>
            <TextField
              name="test"
              inputRef={register({ required: true })}
              variant="outlined"
            />
          </FormControl>
        </Grid>
        <Grid item sm={12} >
          <FormControl fullWidth>
            <TextField
              name="test2"
              inputRef={register({ required: true })}
              variant="outlined"
            />
          </FormControl>
        </Grid>
      </Grid>
    </form>
  )
}

export default Form

-ローカルストレージへの保存フロー
●フォームを送信→フォームデータのオブジェクトをJSONに変換し、それをvalueとして任意のkeyとともにlocalStorageへ保存する。それがlocalStorage.setItem('form', JSON.stringify(formData))の部分。
※第一引数がこのページを意味できるようなkeyで第2引数がデータ
※同じkeyで再度登録すると上書きされる→（常に新しいデータが保存される。）

  • 取得するときはuseEffectの中で行う
    ●理由は、NEXT標準のSSGでレンダリングされるときにはlocalStorageはないため。（サーバー内で事前レンダリングされるため）なのでuseEffect内で実行し、クライアント側で表示するときに取得できるようにしている。

  • 取得するときのフロー
    ●localStorage→任意のkeyを基にJsonをオブジェクトへ変換し取得。それが JSON.parse(localStorage.getItem('form'))の部分。

  • フォームの中に表示させる。
    ●今回はtestのテキストフィールドのみキャッシュを保存しておきたい要件とする。
    その場合は、 取得後setValue('test', defaultValue.test)から対応するデータをセットする。
    ※defaultValueは上記取得したオブジェクトが入っている。
    これで完了。

参考サイト

このスクラップは2022/04/17にクローズされました