Keep Todo Data After Refresh: Adding Local Storage in React

Keep Todo Data After Refresh: Adding Local Storage in React

In this guide, we will learn how to store and retrieve Todo data using localStorage in React, ensuring data persistence even after a page refresh.

Why Use Local Storage?

- Prevents data loss when the page is refreshed.
- Saves user progress without requiring a backend.
- Improves user experience by retaining task lists.

Implementation Steps

Follow these steps to integrate local storage into your React Todo App.

React Code Example

    
import React, { useState, useEffect } from "react";

function TodoApp() {
  const [tasks, setTasks] = useState([]);

  // Load tasks from localStorage on component mount
  useEffect(() => {
    const storedTasks = JSON.parse(localStorage.getItem("tasks")) || [];
    setTasks(storedTasks);
  }, []);

  // Save tasks to localStorage whenever tasks change
  useEffect(() => {
    localStorage.setItem("tasks", JSON.stringify(tasks));
  }, [tasks]);

  const addTask = (task) => {
    const updatedTasks = [...tasks, task];
    setTasks(updatedTasks);
  };

  return (
    

      
Todo List
       addTask("New Task")} className="bg-blue-500 text-white px-4 py-2 rounded-md">
        Add Task
      
      

        {tasks.map((task, index) => (
          
{task}
        ))}
      
    
  );
}

export default TodoApp;
    
  

Best Practices

- Always parse JSON when retrieving data from local storage.
- Store only essential data to prevent excessive local storage usage.
- Keep data updates synchronized with state changes using useEffect.