In this 41-minute masterclass, we explore everything you need to know about persisting data in React using Local Storage and Session Storage.
If you've ever refreshed your React app and lost all your user's progress, this video is for you! We cover the architectural differences between permanent and temporary storage and how to implement them cleanly within your components.
🕒 What you will learn:
00:00 - Intro to Browser Storage
05:20 - Local Storage vs Session Storage: Key Differences
12:45 - Saving & Retrieving Strings and Objects (JSON)
22:10 - Managing Storage with useEffect and useState
30:05 - Building a Custom useLocalStorage Hook
38:20 - Security Best Practices & SSR Considerations
💻 Key Concepts:
localStorage.setItem() & localStorage.getItem()
sessionStorage.setItem() & sessionStorage.getItem()
Handling JSON with JSON.stringify and JSON.parse
Stop losing state on refresh and start building professional, persistent web applications!