How to use Local Storage with React

Hey guys,

If you don't know about local storage then this blog is very useful for you. this blog is beginner friendly those who are new in JavaScript world. Many people struggle a lot in local storage.

Here I will tell you the complete information about local storage and how to use it with react and also tell you the different way to use local storage. I am sure, after reading this blog you will be clear understanding about local storage, so lets start...

What is local storage?

Local storage is web storage object that allows to store the data locally in your computer which means saved data across browser session with no expiration time.

How to set data into local storage

you need to save data in key value pair .If you want to save array and object (non-premitive data types) so first you need to converted into string we use JSON.stringify because it is transmitted to the web server and data can be saved only string format.

Note:-In case of string,number,boolean( premitive data types) you don't need to convert into string

here we are using items state which is initially empty array and setItem function to update the state

why useEffect

Because if you setitem inside the useEffect our app will re-render on every state change so it would be dependent on items. now our data will be stored in the local storage. you can try your code editor.

why if(items.length !==0)

Note:-In case of array and object (Non-premitive data types) you don't need to check items.length !==0 .

we need to check if items is empty then we do not have to set data to local storage.

const [items, setItems] = useState([]);
 useEffect(() => {
    items.length !==0 && localStorage.setItem("items", JSON.stringify(items));
  }, [items]);

how to get the item from local storage

You can achieve this in two ways-

you can get the item inside the useEffect hook
you can get the item in useState itself

don't worry we will see both the ways.

first approach we will get the item inside the useEffect

  useEffect(()=>{
    const saved=JSON.parse(localStorage.getItem("items",items))
    if(saved){
      setItems(saved)
    }
  },[])

first you need to remember we were saving the in the string format now we need to converted into json object and use it so we use JSON.parse() function.

Second approach by using useState

const [items, setItems] = useState(()=>{
    const saved=localStorage.getItem("items")
    if(saved){
     return JSON.parse(saved)
    }else{
     return []
    }
  });

How to remove data from local storage

Simply we remove the data from local storage and update the state as an empty like

setItems([ ])

localStorage.removeItem('items')

How to clear all data from local storage

It will clear all data from local storage

localStorage.clear();

you can refer this codesandbox link for better understanding Reference code sandbox link -local storage

Conclusion

we have learnt local storage and how the local storage is work and how can we retrieve data using different approach. I am sure that this blog is helpful for you.

Thank you

Happy coding

My Blogs