Как сохранить состояние реакции в локальном хранилище?

Question

Я начинаю изучать 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;

Это работает, но я хотел сохранить состояние после добавления нового даже после перезагрузки страницы. Следовательно, я хотел сохранить его в локальном хранилище. База данных - это решение, но я хотел, чтобы она хранилась только локально, а не с использованием БД. Возможно ли это?

Answer 1

Когда вы добавляете новую задачу, вы можете установить ее в localStorage следующим образом:

localStorage.setItem("tasks", JSON.stringify(tasks) + ',');

, а в состоянии вашего компонента Tasks.js вы получите задачи и разделите их запятыми, чтобы получить массив.

state = {
   tasks: localStorage.getItem('tasks').split(',')
{