如何保存编辑后的文本刷新?

Question

我使用的是一个名为"EdiText"的React组件。现在，我可以保存文本，但是如果我刷新页面，它就会回到它的初始值。我想保存并保持编辑值，即使在页面刷新后。

我的代码如下:

const Project = ({ project, onDelete}) => {
const [value, setValue] = useState('')
const handleSave = (val) => {
console.log('Edited value ->', val);
setValue(val);
} 
return (
<div>
<div className="project-component">
<EdiText 
type="text" 
className="project-title" 
value={project.title} 
onSave={handleSave} 
showButtonsOnHover
submitOnUnfocus
cancelOnUnfocus
/>
<br/>
<EdiText 
type="textarea" 
className="project-description" 
value={project.description} 
onSave={handleSave} 
showButtonsOnHover
submitOnUnfocus
cancelOnUnfocus
/>
<Link to={`/projectpage/${project.id}`} className="view-icon"><FaEye/></Link>
<FaTrash className="delete-icon" onClick={() => onDelete(project.id)}/>
</div>
</div>
)
}

Answer 1

您可以使用自定义钩子。

// 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(() => {
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
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
// A more advanced implementation would handle the error case
console.log(error);
}
};
return [storedValue, setValue];
}

将其存储到另一个文件中并导入并使用如下:

const [value, setValue] = useLocalStorage('')

Answer 2

您可以使用localStorage:

const handleSave = (val) => {
console.log('Edited value ->', val);
localStorage.setItem('value', val)
setValue(val);
} 

当组件第一次呈现时:

useEffect(() => {
const storedVal = localStorage.getItem('value')
if(storedVal) setValue(val)
}, [])

Answer 3

您可以使用localStorage:

const Project = ({ project, onDelete}) => {
const [value, setValue] = useState(localStorage.getItem('value'))
const handleSave = (val) => {
console.log('Edited value ->', val);
setValue(val);
localStorage.setItem('value', val)
} 
return (
<div>
<div className="project-component">
<EdiText 
type="text" 
className="project-title" 
value={project.title} 
onSave={handleSave} 
showButtonsOnHover
submitOnUnfocus
cancelOnUnfocus
/>
<br/>
<EdiText 
type="textarea" 
className="project-description" 
value={project.description} 
onSave={handleSave} 
showButtonsOnHover
submitOnUnfocus
cancelOnUnfocus
/>
<Link to={`/projectpage/${project.id}`} className="view-icon"><FaEye/></Link>
<FaTrash className="delete-icon" onClick={() => onDelete(project.id)}/>
</div>
</div>
)
}