Chrome Dev Tools Data and File Storage

Continuing the Chrome Dev Tools series, this video covers how you can use the Application tab to manage storage of local files and data in the various data storage features in browsers.
Code from video: gist.github.com/prof3ssorSt3v...
Favicon Generator: realfavicongenerator.net/
Chrome Dev Tools Playlist: • Chrome Web Developer T...

[@s7s_space]

thanks a lot, we need more deeper in that series for chromedev tools

[@brucewayne252]

Thanks a lot for this series of videos :)

[@sufiansuhail9243]

Thank you

[@rmnkot]

Useful as always. Never used indexDB. Are there any real life use cases for that? Thanks.

[@SteveGriffith-Prof3ssorSt3v3]

Any time you want to save a large amount of data locally in the browser.
cookies are good for little bits of data like a session id.
localStorage and sessionStorage work well for saving a bit more data as a JSON string but you have to convert it back and forth between JSON strings and actual objects.
With IndexedDB, no conversion to JSON is required and you can search for objects based on individual property values. You can add index values. Great for saving a snapshot of data from a server. You can access IndexedDB from service workers as well as from the main page script.

[@Gauss6174]

thank you very much 🙏, learned a lot. i'm assuming if u clear that storage on a page like ur personal gmail account, u'll get kicked out of whatever login session u have.

[@SteveGriffith-Prof3ssorSt3v3]

Most likely, you would be kicked out of the login session at the point where the website tries to access any feature or data that is not already on the screen

[@farouktouil5036]

Hi Prof3ssorSt3v3 and thank you for this video, I d like to ask about you for a video of a multiple files upload, and a multiple progress bars
tracking each one of themes in JavaScript, and keep tracking the upload stats even when the connection is lost, and getting the upload back when the connection is back continuing from the stats left that was before the connection dropped down.

[@SteveGriffith-Prof3ssorSt3v3]

With the Fetch API is it not currently possible to monitor the upload progress for any file.
With the older XMLHttpRequest object, there is a progress event that can be used to monitor downloads and uploads
With the Fetch API you can monitor the download progress by treating the body of the response as a Stream and using a StreamReader to get the chunks of data from the Stream as they are received.

[@shahinza]

Thank you