Sincroniza o estado para o localStorage, assim os dados vão persistir entre um refresh. Seu uso é similar ao useState, exceto que passamos uma chave do localStorage para que possamos definir o valor persistido enquanto a página carrega, ao invés do valor inicial.
Sabendo que a localStorage API não está disponível em ambientes de server-side rendering, fazemos uma pequena checagem para fazer o uso comum do SSR e SSG.
import { useState } from "react"; // Usage function App() { // Similar to useState but first arg is key to the value in local storage. const [name, setName] = useLocalStorage("name", "Bob"); return ( <div> <input type="text" placeholder="Enter your name" value={name} onChange={(e) => setName(e.target.value)} /> </div> ); } // Hook function useLocalStorage(key, initialValue) { // State to store our value // Pass initial state function to useState so logic is only executed once const [storedValue, setStoredValue] = useState(() => { if (typeof window === "undefined") { return initialValue; } try { // Get from local storage by key const item = window.localStorage.getItem(key); // Parse stored json or if none return initialValue return item ? JSON.parse(item) : initialValue; } catch (error) { // If error also return initialValue console.log(error); return initialValue; } }); // Return a wrapped version of useState's setter function that ... // ... persists the new value to localStorage. const setValue = (value) => { try { // Allow value to be a function so we have same API as useState const valueToStore = value instanceof Function ? value(storedValue) : value; // Save state setStoredValue(valueToStore); // Save to local storage if (typeof window !== "undefined") { window.localStorage.setItem(key, JSON.stringify(valueToStore)); } } catch (error) { // A more advanced implementation would handle the error case console.log(error); } }; return [storedValue, setValue]; }
Criado por @guilherssousa, mantido por 1 pessoas 💗