在React中,可以使用localStorage
来进行本地存储。如果localStorage
中的值没有在React中更新,可以使用useEffect
钩子函数来监听localStorage
中的值,并在值发生变化时更新React组件。下面是一个示例代码:
import React, { useState, useEffect } from 'react';
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
const storedCount = localStorage.getItem('count');
if (storedCount) {
setCount(parseInt(storedCount));
}
}, []);
const increment = () => {
setCount(count + 1);
localStorage.setItem('count', count + 1);
};
const decrement = () => {
setCount(count - 1);
localStorage.setItem('count', count - 1);
};
return (
Count: {count}
);
}
export default App;
在上面的例子中,我们使用localStorage
存储了一个count
值。在组件渲染时,我们使用useEffect
钩子函数监听localStorage
中的count
值,如果存在,则将其更新到组件的状态中。然后,我们通过点击按钮来增加或减少count
的值,并将更新后的值存储回localStorage
中。
这样,即使页面被刷新,count
的值也会从localStorage
中恢复,并在组件中更新。
下一篇:本地存储问题