Enregistrer l'état dans le stockage local

Je suis nouveau pour réagir, j'ai une barre de recherche, quand je saisis quelque chose, elle met automatiquement à jour les résultats, mais je veux pouvoir naviguer loin de la page et quand je reviens, je veux qu'elle soit persistante. La recherche doit être conservée jusqu'à ce qu'elle soit effacée manuellement par l'utilisateur.

Ceci est mon code jusqu'à présent:

 import { useEffect, useRef, useState } from "react";
import { useOnClickOutside } from "../../hooks";
import useDebounce from "../../hooks/useDebounce";
import { ISearchProps } from "./search.props";
import { SearchWrapper } from "./Search.style";
const Search: React.FC<ISearchProps> = ({onChange, placeholder = "Search by..."}) => {
 
 const [value, setValue] = useState<string>("");
 const debouncedValue = useDebounce(value, 500);
 const [expandInput, setExpandInput] = useState(false);
 const ref = useRef(null);
 const [input, setInput] = useState<HTMLInputElement | null>();
 useEffect(()=>{
 onChange(debouncedValue);
 window.localStorage.setItem('SAVE_SEARCH', JSON.stringify(value));
 }, [debouncedValue]);
 useEffect(()=>{
 const data = window.localStorage.getItem('SAVE_SEARCH');
 if (data!== null) 
 setValue(JSON.parse(data))
 }, [setValue]);
 useEffect(()=>{
 expandInput && input?.focus();
 }, [expandInput]);
 const searchHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
 setValue(e.target.value);
 }
 
 useOnClickOutside(ref, () => value === "" && setExpandInput(false));
 
 return(
 <SearchWrapper expandInput={expandInput} ref={ref}>
 <input ref={inputEl => setInput(inputEl)} type="text" onChange={(e) => searchHandler(e)} value={value} placeholder={placeholder} />
 { (expandInput && (value.length > 0)) && <i className="ico-Exit" onClick={()=> setValue("")} ></i>}
 <button className="search-button" onClick={() => setExpandInput(true)}>
 <i className="ico-Search"></i>
 </button>
 </SearchWrapper>
 )
}
export default Search; 

Je peux voir cela dans les outils de développement> Stockage, il se met à jour au fur et à mesure que je tape:

Je ne sais pas ce que je rate, aidez-moi s'il vous plaît !

Solution du problème

Vous pouvez initialiser votre état en obtenant la valeur du stockage local. useState hookaccepter une fonction en paramètre.

 const [value, setValue] = useState(window.localStorage.getItem('SAVE_SEARCH'))
 

Maintenant, lorsque votre composant sera rendu, il obtiendra la valeur qui se trouve sur le stockage local et l'affectera à votre état.

Mais, ce serait plus facile si vous utilisiez React Contextpour gérer global values.

https://reactjs.org/docs/context.html#when-to-use-context