custom hook useLocalStorage

react-advanced-tag1/src/components/exercises/RefExercise/index.tsx

@@ -1,16 +1,30 @@
 import { FormEvent, useRef, useState } from "react";
+import useLocalStorage from "../../../hooks/useLocalStorage";
+
+interface FormValues {
+    email: string;
+    password: string;
+}
 
 export default function RefExercise(): React.ReactElement {
     console.log("RefExercise rendered");
 
     const emailRef = useRef<HTMLInputElement>(null);
     const passwordRef = useRef<HTMLInputElement>(null);
+    const {setStoredValue, value: formDataValues} = useLocalStorage<FormValues>("formdata", {
+        email: "",
+        password: ""
+    } );
 
     const handleSubmit = () => {
         console.log("submit", {
             email: emailRef.current?.value,
             password: passwordRef.current?.value
         });
+        setStoredValue({
+            email: emailRef.current?.value || "",
+            password: passwordRef.current?.value || ""
+        });
         passwordRef.current?.focus();
     }
 
@@ -47,8 +61,8 @@ export default function RefExercise(): React.ReactElement {
         <div style={{ display: "flex", flexDirection: "column", gap: "3rem" }}>
         <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
             <h3>values by ref</h3>
-            <input type="text" placeholder="email" ref={emailRef}/>
+            <input type="text" placeholder="email" ref={emailRef} defaultValue={formDataValues?.email}/>
-            <input type="text" placeholder="password" ref={passwordRef}/>
+            <input type="text" placeholder="password" ref={passwordRef} defaultValue={formDataValues?.password}/>
             <button onClick={handleSubmit}>Submit</button>
         </div>
         <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>

react-advanced-tag1/src/hooks/useLocalStorage.ts

@@ -0,0 +1,39 @@
+import { useState } from "react";
+
+export default function useLocalStorage<T>(key: string, initialValue: T | null) {
+    const [value, setValue] = useState<T | null>(() => {
+        try {
+            if (typeof window === "undefined") {
+                return initialValue;
+            }
+            const storedValue = localStorage.getItem(key);
+            return storedValue ? JSON.parse(storedValue) : initialValue;
+        } catch (error) {
+            console.error("Error reading from localStorage", error);
+            return initialValue;
+        }
+    });
+    const setStoredValue = (newValue: T) => {
+        try {
+            const valueToStore = newValue instanceof Function ? newValue(value) : newValue;
+            setValue(valueToStore);
+            if (typeof window !== "undefined") {
+                localStorage.setItem(key, JSON.stringify(valueToStore));
+            }
+        } catch (error) {
+            console.error("Error writing to localStorage", error);
+        }
+    }
+
+    const removeStoredValue = () => {
+        try {
+            if (typeof window !== "undefined") {
+                localStorage.removeItem(key);
+            }
+            setValue(null);
+        } catch (error) {
+            console.error("Error removing from localStorage", error);
+        }
+    }
+    return {value, setStoredValue, removeStoredValue};
+}