Next

React + Browser Storage: Keeping Tasks Alive

When I was building a Todo app for my portfolio, I wanted the items added to the task list to persist, even when refreshing the page or navigating away and returning back to the page later.

A quick Google search question to ChatGPT and its taught me about local storage. Here’s what I learned, rewritten as always to help lock this stuff into my brain 🧠

Browser storage in a nutshell

You can store data locally on a users machine using functionality built into most modern browsers. Why? Well, it’s useful for storing larger amounts of data than cookies can handle (about 5MB). And apparently doesnt get sent back and forward to the server like cookies on each page request, so that seems sensible.

There are two main ways to store data in the browser: sessionStorage and localStorage. Both are objects that provide a simple API for saving and reading data, which we’ll look at later in this post.

For now, which one should you use? See below the differences:

sessionStorage

  • Storage is tied to a single browser tab.
  • Data persists while the tab is open, including page reloads.
  • However, two tabs open on the same website are not able to share sessionStorage data.
  • When the tab is closed, the data is lost.

localStorage

  • Storage is tied to the website itself rather than a specific tab.
  • All tabs open on the same site can read and write to the same data.
  • This means different tabs from same website can share localStorage data, unlike sessionStorage
  • The data persists even after closing the browser, unless the user clears site data or uses private/incognito mode.

For the todo list project, localStorage seems the best option.

Other fun stuff about browser storage

Typically, localStorage and sessionStorage allow you to store about 5MB of data, depending on the browser. Try to write any more and the browser will throw a QuotaExceededError.

You can only store data as strings. So if you need to store objects, arrays or numbers, you’ve got to convert it to a string using JSON.stringify()

When retrieving the data, to convert the object, array or number back to its original form, use JSON.parse()

To store data in local storage

You need to use the localStorage API, which provides several methods to manage data:

  • .setItem(key, value) – saves a string value under a key
  • .getItem(key) – retrieves the value for a given key
  • .removeItem(key) – deletes a key/value pair
  • .clear() – clears everything stored for the site

So in my React todo app, I used localStorage to save the task list so that it persists even when the page is refreshed.

Save tasks to localStorage

useEffect(() => {   
  localStorage.setItem('tasks', JSON.stringify(tasks)); 
  }, [tasks]);

This useEffect runs whenever the tasks array changes, and saves the latest version to localStorage.

Remember: items can only be stored as strings, so objects, arrays or numbers need to be stringify’d first.

Load tasks from localStorage

useEffect(() => {   
const saved = localStorage.getItem('tasks');   
if (saved) {     
  setTasks(JSON.parse(saved));   
} 
}, []);

The empty dependency array ([]) means this runs once on initial page load, and if saved tasks exist, parse the string back into an array and set it in state using setTasks

Thats all I have to say on localStorage.