\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0645\u0627\u0645 \u06a9\u062f\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u062f\u0631 repo Github \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n
Summarize this content to 400 words in Persian Lang
\n \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0645\u0627\u0645 \u06a9\u062f\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u062f\u0631 repo Github \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n
\u0686\u0627\u0644\u0634\u200c\u0647\u0627\u06cc \u0642\u0644\u0627\u0628 \u0633\u0641\u0627\u0631\u0634\u06cc React \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 API\u0647\u0627\u06cc \u0648\u0628<\/p>\n
useLocalStorage()<\/p>\n
import { useState, useEffect } from “react”;<\/p>\n
function useLocalStorage(key, initialValue) {
\n const [storedValue, setStoredValue] = useState(() => {
\n try {
\n const item = window.localStorage.getItem(key);
\n return item ? JSON.parse(item) : initialValue;
\n } catch (err) {
\n console.error(`Error reading localStorage key “${key}”:`, error);
\n return initialValue;
\n }
\n });<\/p>\n
useEffect(() => {
\n try {
\n window.localStorage.setItem(key, JSON.stringify(storedValue));
\n } catch (err) {
\n console.error(`Error writing localStorage key \u201c${key}\u201d:`, error);
\n }
\n }, [key, storedValue]);<\/p>\n
const setValue = (value) => {
\n try {
\n const valueToStore =
\n value instanceof Function ? value(storedValue) : value;
\n setStoredValue(valueToStore);
\n } catch (err) {
\n console.error(`Error setting localStorage key \u201c${key}\u201d:`, error);
\n }
\n };<\/p>\n
const removeValue = () => {
\n try {
\n window.localStorage.removeItem(key);
\n setStoredValue(initialValue);
\n } catch (error) {
\n console.error(`Error removing localStorage key \u201c${key}\u201d:`, error);
\n }
\n };<\/p>\n
return [storedValue, setValue, removeValue];
\n}<\/p>\n
function LocalStorageExample() {
\n const [name, setName, removeName] = useLocalStorage(“name”, “John Doe”);<\/p>\n
return (
\n <div>
\n <h2>Local Storage Exampleh2>
\n <p>Stored Name: {name}p>
\n <input
\n type=”text”
\n value={name}
\n onChange={(e) => setName(e.target.value)}
\n placeholder=”Enter your name”
\n \/>
\n <button onClick={removeName}>Remove Namebutton>
\n div>
\n );
\n}<\/p>\n
export default function App() {
\n return (
\n <div>
\n <h1>Using useLocalStorage Hookh1>
\n <LocalStorageExample \/>
\n div>
\n );
\n}<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0645\u0627\u0645 \u06a9\u062f\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u062f\u0631 repo Github \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n