How do i make the data in the input feild of my form in next js stay after refresh of the page?

Question

I am working on a form in nextjs and i would love the data to remain the same i.e persist after the entire page as been refreshed or reloaded . Local storage doesnt work with next js , so i am looking for an alternative , i always get local storage not defined when i use it Here is my code below

import React, { useState, useEffect, useLayoutEffect, createContext , useContext } from "react";
import { useRouter } from "next/router";
import Cookie from "js-cookie";
import { parseCookies } from "../helpers/index";
import { Formik } from "formik";
function Form() {
  return (
      <div>
      <form action="" >
        <section class="left">
          <div class="input-container">
            <label for="name">Full name</label>
            <input type="text"/>
          </div>
          <div class="input-container">
            <label for="age" required>
              Mobile Number
            </label>
            <input type="text"/>
          </div>
          <div class="input-container">
            <label for="phone">Choose password</label>
            <input type="text"/>
          </div>
          </div>
        </section>
      </form>
    </div>
  );
}

export default Form;

Answer 1

With formik out of the question, to let data persist after refresh, you need to save it to localStorage ( or cookies ).

This works for NextJS (you need to test for window first)

Example as follows

const App = () => {
     const [ value, setValue ] = useState({
                                     name: '',
                                     mobile: '' 
                                 });

     useEffect(() => {
          //you need to call this for nextjs, so this is performed only on client side.
          if (typeof window !== 'undefined') {
               let storedValue = localStorage.getItem('value');
               if (storedValue) {
                   storedValue = JSON.parse(storedValue) || {}
                   // we explicitly get name and mobile value in case localStorage was manually modified.
                   const name = storedValue.name || ''
                   const mobile = storedValue.mobile || ''
                   setValue({ name, mobile }) //restore value from localStorage
               }
          

          }
        
     },[]) 

     // alternatively a betterway to handle side effect is useEffect
     // useEffect(() => {
     //   localStorage.setItem('value', JSON.stringify(value))
     // },[value])
     
     const onChange = (e) => {
         const name = e.target.name
         
         const newValue = { ...value, [name]: e.target.value }
         setValue(newValue);
         localStorage.setItem('value', JSON.stringify(newValue)) //save input to localstorage
     }

     return (<div>
              <input name="name" value={value.name} onChange={onChange} />
              <input name="mobile" value={value.mobile} onChange={onChange} />
             </div>
      ) 
 
   }


}