React Todoリストの情報を「localStorage」に保存して、画面を更新してもデータが残るようにしたい

実現したいこと

前提

Reactで簡単なTodoListを作成しています。
親コンポーネント：App.js
子コンポーネント：Input.js/TodoList.js/Button.js
で生成しています。

該当のソースコード

import './App.css'; import { useState } from 'react'; import Input from './components/Input'; import TodoList from './components/TodoList'; function App() { const [taskList, setTaskList] = useState([]); return ( <div className='List'> <div className='inner'> <h1>今日やること</h1> <div> <Input taskList = {taskList} setTaskList = {setTaskList} /> <TodoList taskList = {taskList} setTaskList = {setTaskList} /> </div> </div> </div> ); } export default App;

import { useState } from 'react'; import Button from "../components/Button"; import '../App.css'; const Input = ({taskList, setTaskList}) => { const [inputText, setInputText] = useState(""); const handleSubmit = (e) => { e.preventDefault(); if (inputText.length !== 0) { setTaskList([ ...taskList, { id: taskList.length, text: inputText, completed: false } ]); console.log(taskList); setInputText(''); } } const handleChange = (e) => { setInputText(e.target.value); } return ( <div className='input'> <form onSubmit = {handleSubmit}> <input type='text' onChange={handleChange} value={inputText} /> <Button backgroundColor={inputText ? '#008CFF' : '#C1C1C1'} btnText="追加" marginLeft='20px'> </Button> </form> </div> ) }; export default Input;

import { useState } from "react"; import Button from "../components/Button"; const TodoList = ({taskList, setTaskList}) => { const handleDelete = (id) => { setTaskList(taskList.filter((task) => task.id !== id)); } const handleCompleted = (id) => { setTaskList(taskList.map((task) => { if(id === task.id){ return { ...task, completed: !task.completed }; } return task; })) }; return ( <div className='todoList'> <div className='todos'> {taskList.map((task, index) => ( <div className={`todo ${task.completed ? 'completed' : ''}`} key={index}> <div className='todoText'> <span>{task.text}</span> </div> <Button eventClick={() => handleDelete(task.id)} btnText="削除" backgroundColor="#FF3700" > </Button> <Button eventClick={() => handleCompleted(task.id)} btnText="完了" backgroundColor={task.completed ? '#C1C1C1' : '#008CFF'} marginLeft='20px'> </Button> </div> ))} </div> </div> ) } export default TodoList;

import styled from 'styled-components'; const StyleButton = styled.button ({ border: 'none', borderRadius: '4px', fontFamily: 'ヒラギノ丸ゴ ProN', fontWeight: '400', fontSize: '14px', color: '#FFFFFF', width: '57px', height: '32px', }) const Button = (props) => { const contentstyle ={ backgroundColor: props.backgroundColor, marginLeft: props.marginLeft, }; return ( <> <StyleButton onClick={props.eventClick} style={contentstyle} >{props.btnText}</StyleButton > </> ) }; export default Button;

試したこと

// 取得
localStorage.getItem('key')

// 保存
localStorage.setItem('key', 'value');

// 削除
localStorage.removeItem('key');

上記を使って設定していくというところまでは分かりましたが、何をどこに書いていけばいいか分かりません。

補足情報（FW/ツールのバージョンなど）

React初心者です。
宜しくお願い致します。