Estoy trabajando en un formulario para agregar una receta a mi sitio web y quiero almacenar los contenidos de cada entrada de formulario dentro del almacenamiento local para que no se pierdan al actualizar la página. Tengo alrededor de 10 entradas en mi formulario con todos sus contenidos en estados de reacción. ¿Sería mejor mantener cada variable en un objeto y almacenarlo como un elemento de almacenamiento local para cambiar en cada cambio de estado de variable, o mantener cada variable en un elemento de almacenamiento local separado?

Opción 1:

 const [a, setA] = useState('') const [b, setB] = useState('') // Many more variables... useEffect(() => { const recipes = JSON.parse(localStorage.getItem('recipes')) if (recipes) { setA(recipes.a) setB(recipes.b) // For each variable... } }, []) // Update 'recipe' item in local storage on any form input state change useEffect(() => { localStorage.setItem('recipe', JSON.stringify({a, b})) }, [a, b])

Opcion 2:

 // Set each state to it's local storage item or an empty string if local storage is empty const localA = localStorage.getItem('a') const [a, setA] = useState(JSON.parse(() => (localA ? localA : ''))) const localB = localStorage.getItem('b') const [b, setB] = useState(JSON.parse(() => (localB ? localB : ''))) // Set each individual local storage item on state change useEffect(() => { localStorage.setItem('a', JSON.stringify(a)) }, [a]) useEffect(() => { localStorage.setItem('b', JSON.stringify(b)) }, [b])

Solo quiero saber qué será lo mejor para una mayor cantidad de variables o si aún hay una mejor manera de resolver esto en primer lugar. ¡Muchas gracias!