数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚
法律ReactJS 中的 LocalStorage
在本文中，我们将了解如何在 React 应用程序 中设置和检索用户浏览器 localStorage 内存中的数据。
LocalStorage 是一个 Web 存储对象，用于将数据存储在用户的计算机本地，这意味着存储的数据会在浏览器会话间保存，且所存储的数据没有过期时间。
语法
// To store data
localStorage.setItem('Name', 'Rahul');
// To retrieve data
localStorage.getItem('Name');
// To clear a specific item
localStorage.removeItem('Name');
// To clear the whole data stored in localStorage
localStorage.clear();在 localStorage 中设置、检索和移除数据
在本示例中，我们将构建一个 React 应用程序，它从用户处获取用户名和密码，并将它们以一个条目形式存储在用户计算机的 localStorage 中。
示例
App.jsx
import React, { useState } from 'react';
const App = () => {
const [name, setName] = useState('');
const [pwd, setPwd] = useState('');
const handle = () => {
localStorage.setItem('Name', name);
localStorage.setItem('Password', pwd);
};
const remove = () => {
localStorage.removeItem('Name');
localStorage.removeItem('Password');
};
return (
<div className="App">
<h1>Name of the user:</h1>
<input
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<h1>Password of the user:</h1>
<input
type="password"
placeholder="Password"
value={pwd}
onChange={(e) => setPwd(e.target.value)}
/>
<div>
<button onClick={handle}>Done</button>
</div>
{localStorage.getItem('Name') && (
<div>
Name: <p>{localStorage.getItem('Name')}</p>
</div>
)}
{localStorage.getItem('Password') && (
<div>
Password: <p>{localStorage.getItem('Password')}</p>
</div>
)}
<div>
<button onClick={remove}>Remove</button>
</div>
</div>
);
};
export default App;在上方的示例中，当点击 完成 按钮时，执行 handle 函数，它将在用户的 localStorage 中设置条目并显示它们。但是，当点击 移除 按钮时，执行 remove 函数，它将从 localStorage 中移除条目。
输出
这将产生以下结果。
更新于: 01-11-2023
3.5 万 + 阅读量
广告