React / Next.js でuseState でセットした値を保持する方法を教えていただけないでしょうか

Question

Next.jsでnext/linkを利用してページ遷移を行っているのですが、戻るボタンを押した際に前ページのuseStateの値を保持するにはどうすれば良いでしょうか。

調べても情報があまり出てこず、もしかしたら実現しようとしていることがおかしいのかもしれませんが、具体的には以下のような機能を実装しています。

検索ページのフォームに入力 → 検索結果をクリック → 戻るボタンをクリック で検索ページに戻った際にフォームの値が入力されているようにしたいです。
戻るボタンは以下のように作成していますが、ブラウザバックやブラウザ更新時にも対応できればと思っています。

検索画面

import { useState } from "react";
const [searchParam, setSearchParam] = useState<String | null>(null);
<input
  type="text"
  placeholder="Search"
  onChange={(e) => {
    setSearchParam(e.target.value);
  }}
/>

ページ遷移後の画面

import Router from "next/router";
<div onClick={() => Router.back()}>Go Back</div>

Answer 1

ブラウザバックやブラウザ更新時にも対応できればと思っています。

query string, localStorage, Cookieで対応するのはどうでしょうか？

Comments

[fukuma]

CookieはReactだと扱いづらそうですが、localStorageというものがある事を知りませんでした。
こちらを使用することで実現できそうです。ありがとうございます！