如何将值写入localStorage并在重新加载时显示?

Question

页面上有一个输入，最初它是空的。我需要实现以下功能:在页面加载时，组件App从localStorage获取键appData的值并将其放在input中。也就是说，在localStorage中，我将值写入输入，并且在重新加载时将其显示在输入中。我该怎么做呢?我需要使用useEffect

import { useEffect, useState } from "react";
export default function App() {
const [userData, setUserData] = useState("");
useEffect(() => {
localStorage.setItem("Userdata", JSON.stringify(userData));
}, [userData]);
return (
<div>
<input value={userData} onChange={(e) => setUserData(e.target.value)}></input>
</div>
);
}

Answer 1

使用change事件写入localStorage，然后在useState钩子中使用init函数。

import { useState } from 'react';
const loadUserData = () => localStorage.getItem('UserData') || '';
const saveUserData = (userData) => localStorage.setItem('UserData', userData);
export default const Application = () => {
const [ userData, setUserData ] = useState(loadUserData);

const handleUserDataUpdate = e => {
const userData = e.target.value;
setUserData(userData);
saveUserData(userData);
};

return <div>
<label htmlFor="testInput">Test Input</label>
<input id="testInput" value={ userData } onChange={ handleUserDataUpdate } />
</div>;
}

如果您需要一个使用非受控输入的示例，这里有一个使用useEffect的示例:

import { useEffect } from 'react';
const loadUserData = () => localStorage.getItem('UserData') || '';
const saveUserData = (userData) => localStorage.setItem('UserData', userData);
export default const Application = () => {
const inputRef = useRef();

useEffect(() => {
inputRef.current.value = loadUserData();
}, []);  // initial load

const handleUpdateUserData = () => {
saveUserData(inputRef.current.value);
};

return <div>
<label htmlFor="testInput">Test Input</label>
<input ref={ inputRef } id="testInput" onChange={ handleUpdateUserData } />
</div>;
}

Answer 2

您可以为state内部的输入设置一个默认值。

const [userData, setUserData] = 
useState(JSON.parse(localStorage.getItem('Userdata')) || '');

因此，当组件挂载时(在重新加载后)，初始userData值直接从localStorage中获取。如果为空，则设置回退值('')。

注意:请确保在输入中也添加了onChange处理程序。