React js сделать запись в local storage

Question

Надо после закрытия браузера, при открытии вновь сохранялись все задачи в todo.

Сайт: https://react-todo-app3.vercel.app
Репозиторий на гит: https://github.com/paul76546/react-todo-app3

import React, { useState } from 'react';
import TodoForm from './TodoForm';
import Todo from './Todo';

function TodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = todo => {
    if (!todo.text || /^s*$/.test(todo.text)) {
      return;
    }

    const newTodos = [todo, ...todos];

    setTodos(newTodos);
    console.log(...todos);
  };

  const updateTodo = (todoId, newValue) => {
    if (!newValue.text || /^s*$/.test(newValue.text)) {
      return;
    }

    setTodos(prev => prev.map(item => (item.id === todoId ? newValue : item)));
  };

  const removeTodo = id => {
    const removedArr = [...todos].filter(todo => todo.id !== id);

    setTodos(removedArr);
  };

  const completeTodo = id => {
    let updatedTodos = todos.map(todo => {
      if (todo.id === id) {
        todo.isComplete = !todo.isComplete;
      }
      return todo;
    });
    setTodos(updatedTodos);
  };

  //h1 заголовок Какие планы на сегодня? 
  // (What's the Plan for Today?) по английскому
  // меняю на Список дел на сегодня
  //ставлю обратно 
  return (
    <>
      <h1>What's the Plan for Today?</h1>
      <TodoForm onSubmit={addTodo} />
      <Todo
        todos={todos}
        completeTodo={completeTodo}
        removeTodo={removeTodo}
        updateTodo={updateTodo}
      />
    </>
  );
}

export default TodoList;

localstorage reactjs

What's the Plan for Today?

); } export default TodoList;

Илья Паймушкин · Accepted Answer

Строку с инициализацией состояния todos переделываем на:
const [todos, setTodos] = useState(localStorage.getItem('todos') ? JSON.parse(localStorage.getItem('todos')) : []);

Добавляем еще одну функцию (например: setTodosWithSave):
const setTodosWithSave = (newTodos) => {
      setTodos(newTodos);
      localStorage.setItem('todos', JSON.stringify(newTodos))
}

В функциях addTodo, updateTodo, removeTodo, completeTodo меняете функцию setTodos на setTodosWithSave

Пауль Джун · Answer

//import {reactLocalStorage} from 'reactjs-localstorage'; import TodoForm from './TodoForm'; import Todo from './Todo'; function TodoList() { //const [todos, setTodos] = useState([]);переделываем на const [todos, setTodos] = useState(localStorage.getItem('todos') ? JSON.parse(localStorage.getItem('todos')) : []); //добавляем еще одну функцию const setTodosWithSave = (newTodos) => { setTodos(newTodos); localStorage.setItem('todos', JSON.stringify(newTodos)) }; const addTodo = todo => { if (!todo.text || /^s*$/.test(todo.text)) { return; } const newTodos = [todo, ...todos]; setTodosWithSave(newTodos); console.log(...todos); }; //перед консоль лог было setTodos(newTodos); const updateTodo = (todoId, newValue) => { if (!newValue.text || /^s*$/.test(newValue.text)) { return; } setTodos(prev => prev.map(item => (item.id === todoId ? newValue : item))); }; //34 строка? const removeTodo = id => { const removedArr = [...todos].filter(todo => todo.id !== id); setTodosWithSave(removedArr); }; const completeTodo = id => { let updatedTodos = todos.map(todo => { if (todo.id === id) { todo.isComplete = !todo.isComplete; } return todo; }); setTodosWithSave(updatedTodos); }; //let toLocal = reactLocalStorage.setObject('var', {'test': 'test'});?????How //h1 заголовок Какие планы на сегодня? // (What's the Plan for Today?) по английскому // меняю на Список дел на сегодня //ставлю обратно return ( <>

Список дел на сегодня

); } export default TodoList;

React js сделать запись в local storage

2 Answers

Add your own answers!

Ask a Question