如何将反应状态存储到本地存储中？

我开始学习React并创建了一个todo应用程序，我想将任务状态存储到本地存储中 . 我怎样才能做到这一点？这是我的代码：

Tasks.js

import React, { Component } from 'react';
import AddTask from './AddTask';
import Task from './Task';

class Tasks extends Component {
    state = {
        tasks:[
          {
            task:'Learn web development'
          },
          {
            task:'Learn mobile app development'
          }
        ]
      }

      componentDidMount() {
        localStorage.tasks = JSON.stringify(this.state.tasks);
      }

      addTask = (newTask) => {
        let tasks = [...this.state.tasks, newTask];
        this.setState({
            tasks:tasks
        });
      }

      render() {
        return (
          <div className="tasks">
            <AddTask addTask={this.addTask}/>
            <Task tasks={this.state.tasks}/>
          </div>
     );
  }
}

export default Tasks;

AddTask.js

import React, { Component } from 'react';

class AddTask extends Component {
    state = {
        task:''
    }

    handleChange = (e) => {
         this.setState({task:e.target.value});
    }

    handleSubmit = (e) => {
        e.preventDefault();

        if(this.state.task!=='') {
            this.props.addTask(this.state);
        }

        this.setState({
            task:''
        });
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="text" id="task" placeholder="What should I do?" className="textbox" autoComplete="off" onChange={this.handleChange} value={this.state.task} autoFocus/>
            </form>
        );
    }
}

export default AddTask;

Task.js

import React from 'react';

const Task = ({tasks}) => {
    let task = tasks.map(task => {
        return (
            <li key={task.task}><input type="checkbox"/>{task.task}</li>
        )
    })

    return (
        <ul>
            {task}
        </ul>
    )
}
export default Task;

这是有效的，但我想在重新加载页面后添加新的状态后保持状态 . 因此，我希望它存储在本地存储中 . 数据库是一种解决方案，但我只希望它存储在本地而不是使用数据库 . 可能吗？