Using localStorage to #{Persist} with React!

Another project week passed without sleeping, eating, and resting, but I’ve learned more than ever in 6 days, and today I want to talk about something that I’ve re-learned and mastered during this time period; localStorage.

What is localStorage?

The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.

localStorage is similar to sessionStorage, except that while localStorage data has no expiration time, sessionStorage data gets cleared when the page session ends — that is, when the page is closed. (localStorage data for a document loaded in a "private browsing" or "incognito" session is cleared when the last "private" tab is closed.)

Developers often implement localStorage when adding a dark mode feature to an application, persisting a to-do item, persisting a user’s form input values, “Remember me” functions, etc.

The localStorage API exposes four methods: getItem(), setItem(), removeItem(), and clear(). We will want to use getItem() when we initialize the component to load in any previously persisted data and setItem() to update the localStorage when the count variable changes.

Using getItem() to persist the data

Let’s create a simple counter app to understand localStorage easily.

We have a count variable stored in state and a decrement and increment button, which decreases or increases the number. But every time we refresh the page, we’ll lose the data, and the number will reset. Therefore we want to use localStorage to keep the data persisted.

Here, we use the getItem() storage method to retrieve data from the local storage. The JSON.parse() used in the code deserializes the returned JSON string from the storage.

Both JSON.stringify and JSON.parse are optional when working with string values, as seen in our case. However, other data types, like objects and arrays, require them.

Using setItem() to update the data

We need to use setItem() to update our data, and we need { useEffect } to update localStorage every time the count variable changes. We can update the data without { useEffect } in this case, but in real-world applications might be updated from different places, and this can cause some problems later.

The useEffect has count as a dependency — this means every time the count changes, useEffect will run and update localStorage with the new value.

Using removeItem() to clear data

We need to use removeItem() to remove the key from localStorage if the object exists. If there is no object associated with the given key, this method will do nothing.

There you go! We have a counter app that can persist the data on localStorage and remove it whenever you click the remove button.

If this blog helps at least one person at some point, then my goal will be accomplished. Don’t hesitate to reach out and ask me questions. I wish everyone my besties! Stay with codes :=>

References

https://developer.mozilla.org/

https://logrocket.com/

https://www.tutorialspoint.com/