JavaScript LocalStorage and Session Storage API Tutorial

This JavaScript LocalStorage and SessionStorage tutorial demonstrates the Web Storage API. We'll compare Session Storage (sessionStorage) and Local Storage (localStorage). We'll look at why JSON works so well with web storage. You will learn how to store persistent data for users between their visits to your web app. Let's get started!

✅ Quick Concepts outline:
JavaScript Web Storage API
(0:00) Intro
(0:14) Web Storage is part of the global window object
(4:02) Session Storage
(4:22) Local Storage for persistent data
(4:48) setItem
(5:28) The dev tools application tab
(5:50) What type of data does web storage store?
(6:20) getItem
(7:50) Why JSON is the perfect match for web storage
(12:15) A look at localStorage for persistent data
(14:15) removeItem
(14:55) Retrieving an item that does not exist
(15:25) Clear all items
(15:55) Get the key at a specific index position
(17:10) Return how many keys are in storage

📚 Further Reading:
MDN Web Docs:

📺 More Beginner JS Videos:

✅ Follow Me:

Was this tutorial about the web storage API with sessionStorage, localStorage, and persistent data helpful? If so, please share. Let me know your thoughts in the comments.

#localstorage #sessionstorage #javascript

[DaveGrayTeachesCode]

Keep in mind localStorage and sessionStorage utilizing the Web Storage API is not the only way to utilize storage for your front-end web applications. However, it may be the easiest for beginners to get started with. I plan to create more tutorials for front-end storage solutions in the future. If you already use a solution, let me know what it is in the comments. Likewise, if this tutorial was helpful, let me know that and share. Thanks!

[nikolov]

(12:15) Delving into localStorage for persistent data

Just a small suggestion for enhancement:

1. Close the website window.
2. Stop the Live Server.
3. Comment out your entire JS file and save changes.
4. Restart the app using Live Server.
5. Navigate to the Browser's Application tab -> Local Storage, where you'll find your data persisting flawlessly.

Aside from this minor improvement, Mr. Gray's content remains commendable, as always. Top-notch educational content. Always a pleasure to learn from him ❤

[khemikalse]

You Channel is a premium course for free. Damn! I never really understood LocalStorage until today

[adnan]

i literally first downloaded the video and watched the whole video being offline.. and i searched your video again, just came here to give this video a like for such amazing explanation .. thank you so much sir .. i am learning these concepts just because of you. thank you🥰🥰

[Codak_]

Thanks for your explanation, the good thing about you is your voice and the way you talk goes slow for someone to get things or understand quickly

[ajithkumarv]

I'm searching this video lot days finally got

[Grihlo]

Thank you for another helpful and clear tutorial!

[jamshidtashkent]

Thank you. I really enjoyed watching your video

[oncoding]

Came here from your React tutorial that you recommended :)

[alivarzxorany]

hi Mr Gray, thank for the video. if i have an array in storage, i need to parse it to use for instance second item? or i can select directly?

[quvomiddinkamalov]

Thank you very much, sir. I have a question: Do you think that chatGPT is taking our (web development) job?

[avi]

Please make a tutorial about IndexedDB

[tanercoder]

you didn't say that your method logName hadn't been saved in storage even though it existed in the object... I just discovered it can't be done? how weird!

[bhavanalohri]

can we store file in this local storage web api ??