如何使用 ReactJS 将新状态保存到本地 JSON？

有时我们需要将状态以 JSON 格式存储在浏览器本地。我们可以将任何信息保存到浏览器的本地存储中，并在以后随时访问该信息。

设置环境和执行：

第 1 步：使用以下命令创建 React App。
```
npx create-react-app foldername
```
步骤2：创建项目文件夹后，即文件夹名称，使用以下命令移动到它：
```
cd foldername
```

项目结构：它将如下所示。

App.js

import React, { Component }  from 'react'; 
  
class App extends Component { 
  
  state = { 
    data: "This is data", 
    num: 123, 
    boolean: true, 
  } 
  
  // save data to localStorage 
  saveStateToLocalStorage = () => { 
    localStorage.setItem('state', JSON.stringify(this.state)); 
  } 
  
  // Fetch data from local storage 
  getStateFromLocalStorage = () => { 
    let data = localStorage.getItem('state'); 
    if(data !== undefined) { 
      this.setState(JSON.parse(data)); 
    } 
  } 
  
  componentDidMount() { 
    // Fetch data from local storage 
    this.getStateFromLocalStorage(); 
  } 
  
  render() { 
    return ( 
       
        GeeksforGeeks 
         
       
    ); 
  } 
} 
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。