keep value after page refresh in React - reactjs

Question

Actually, I passed dropdown value in the URL, but how to show the selected value after the page refresh? please solve this issue. I want to try when user select any option then value show on url and after page refresh same selected value show .Thank you
import React, { useState, useEffect } from "react";
import { Link ,navigate} from "gatsby";
export default function IndexPage() {
const [data, setData] = useState("black");
const Vdata = [{
title:"black"
},
{
title:'red'
}]
const handleChange = (value) => {
setData(value);
navigate(`/?location=${value}`);
};
return (
<div className="grid place-items-center">
<select
value={data}
autocomplete="off"
name=""
id=""
className="border p-2 shadow-xl"
onChange={(event) => handleChange(event.target.value)}
>
{Vdata.map((i) => (
<option value={i.title} selected>
{i.title}
</option>
))}
</select>
<p>{window.location.href}</p>
</div>
);
}
// export default IndexPage

Answer 1

The Window localStorage object allows you to save key/value pairs in the browser.
detail info
Initiate data with localStorage stored info, if null default set "black"
const [data, setData] = JSON.parse(localStorage.getItem('title')) || "black";
Add useEffect function to store this selected value when set data.
const handleChange = (value) => {
setData(value);
navigate(`/?location=${value}`);
};
React.useEffect(() => {
localStorage.setItem('title', JSON.stringify(data));
}, [data]);
Finally, Vdata.map((i) => ( should add some condition to set selected attribute.