JavaScript LocalStorage and Session Storage API Tutorial

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
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!
Subscribe ➜ bit.ly/3nGHmNn
▶ This video is part of the JavaScript Tutorials for Beginners Playlist found here: • Javascript Tutorials f...
✅ 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:
Web Storage API: developer.mozilla.org/en-US/d...
sessionStorage: developer.mozilla.org/en-US/d...
localStorage: developer.mozilla.org/en-US/d...
📺 More Beginner JS Videos:
freeCodeCamp: • Learn JavaScript - Ful...
Traversy Media: • JavaScript Crash Cours...
The Net Ninja: • Modern JavaScript Tuto...
✅ Follow Me:
Twitter: / yesdavidgray
Reddit: / daveoneleven
LinkedIn: / davidagray
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!

[@user-dh8rm3ob4f]

Hi Dave, amazing work time and time again. Do you have a video on the other ways to store data in the front end, or will you be doing one in the near future?

[@9nikolov]

(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

[@DaveGrayTeachesCode]

Glad I could help!

[@adnan8465]

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🥰🥰

[@DaveGrayTeachesCode]

I'm glad it has helped!

[@ajithkumarv603]

I'm searching this video lot days finally got

[@Grihlo]

Thank you for another helpful and clear tutorial!

[@DaveGrayTeachesCode]

Glad it was helpful! 🚀

[@dustinbest1326]

Great videos Dave!

[@DaveGrayTeachesCode]

Thank you, Dustin! 💯

[@jamshidtashkent1976]

Thank you. I really enjoyed watching your video

[@DaveGrayTeachesCode]

You're welcome!

[@CynthiaSotoCaballerolYEAHl]

A helpful refresher

[@DaveGrayTeachesCode]

Thanks!

[@Codak_3]

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

[@oncoding4520]

Came here from your React tutorial that you recommended :)

[@DaveGrayTeachesCode]

Welcome!

[@kirillzlobin7135]

Ammazing video

[@jj342]

Top stuff!!

[@DaveGrayTeachesCode]

Thank you!

[@alivarzxorany2892]

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?

[@DaveGrayTeachesCode]

localStorage will store strings, so I also use JSON.stringify() when sending data to the store and JSON.parse() when getting data from the store. More on localStorage here: developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

[@quvomiddinkamalov3292]

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

[@bhavanalohri9326]

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

[@DaveGrayTeachesCode]

That is a great question. I could make a new tutorial based on this question 😀. That said, you can learn how to do it from this article, too: hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

[@avi12]

Please make a tutorial about IndexedDB

[@DaveGrayTeachesCode]

Thanks for asking and for watching! I've been planning to do that. IndexedDB is very useful.

[@Netpilation]

dave how do you define an Api ?

[@DaveGrayTeachesCode]

www.google.com/search?q=define+an+api

[@tanercoder1915]

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!

[@__zenon]

He did mention it and he also mentioned why, which was somehting that was covered in his JSON lesson.

[@tanercoder1915]

@@__zenon one year later )

[@jackfrancis5238]

Odin anyone?!!

[@user-dt2bi5zf2z]

de audio is unpercettible