react使用本地储存
时间: 2023-07-29 20:10:22 浏览: 49
React可以使用浏览器提供的本地存储localStorage或sessionStorage来保存数据。
localStorage和sessionStorage的区别在于:
- localStorage存储的数据没有过期时间,除非手动删除或清除缓存,否则一直存在;
- sessionStorage存储的数据在当前会话结束时(关闭浏览器或标签页)自动删除。
下面是使用localStorage保存数据的示例:
```jsx
import React, { useState, useEffect } from "react";
function App() {
const [name, setName] = useState("");
useEffect(() => {
const storedName = localStorage.getItem("name");
if (storedName) {
setName(storedName);
}
}, []);
const handleChange = (event) => {
setName(event.target.value);
localStorage.setItem("name", event.target.value);
};
return (
<div>
<label>
Name:
<input type="text" value={name} onChange={handleChange} />
</label>
<p>Hello, {name}!</p>
</div>
);
}
export default App;
```
在这个示例中,我们使用useState来定义一个名字变量,并使用useEffect来在组件挂载时从localStorage中读取已存储的名字。当用户在输入框中输入新的名字时,我们使用localStorage.setItem来将其保存到localStorage中。这样,即使用户关闭页面或浏览器,名字数据也会被保存下来,下次访问时可以读取。