Debug Storage APIs

Key Takeaways

Are you more of a cat or a dog person or neither? It doesn't really matter. Just be warned that this brief overview of storage APIs on the web and how you can inspect them with DevTools might involve some kittens. Let's unravel this yarn. >> [music] >> Web apps need to remember things, whether it's your shopping cart, your login session, or that half-written draft you forgot to save. To do this, browsers provide several storage APIs. You've probably heard of cookies, the classic way to store small bits of data. Then there's local storage for things that should stick around forever and session storage for data that only lives as long as your tab is open. For more complex needs, we have index DB, a full-blown database right in your browser. IndexDB is also supported by the fairly new storage buckets API, which helps organize data and manage disk space usage more effectively. All of those storage interfaces can be inspected with dev tools. To show you how, we created this demo site involving five little cats. You'll find it at this link. The cats don't have names yet, but we can assign them one using the respective storage interface. Click assign name next to any of the cats. Then open Chrome DevTools and head to the applications panel. On the left hand side, you'll see all storage interfaces listed. Find the one matching your selected cat. Click on it to reveal currently stored values. Look for any identifier like kitten or kitten name to find the cat's name. Once you find it, write it into the cat's name tag and get rewarded with a few wool balls for your kitten to play with. Now go ahead and find the names for all the other kittens using the local storage session storage index DB and storage bucket sections in the application panel. Now, so much for the storage APIs and the application panel, but we're not done yet. Here's the bonus. Those balls of wool actually react to the device orientation sensor. Too bad you're likely on a desktop device, right? Here's the trick on how you can emulate device orientation with DevTools. Open the sensors panel. Scroll down to device orientation. By default, it's off. So, let's enable it. Now, watch this. As I rotate the virtual device, the wool bolts react. And this is how you can use the dev tools to test and debug animations and effects based on the device orientation API using the sensors panel. Now, next time you want to debug constant dialogues, login sessions, or shopping carts, you know where to start. And had some fun with emulated sensors along the way. Let us know if you're a team cat or team dog in the comments below. And see you next time. [music] >> [music]