- Click the Assign name button in a section.
- Open the Application panel in Chrome DevTools.
- Inspect the different storage sections (Cookies, Local Storage, etc.).
- Find the name associated with each kitten.
- Enter the name in the "Hello my name is" sticker to verify.
- Open the Sensors panel in Chrome DevTools.
- Rotate the virtual device to move the wool balls.
Cookies
Cookies are small pieces of data sent from a website and stored on the user's computer by the user's web browser while the user is browsing. They are mainly used for session management, personalization, and tracking.
Local Storage
localStorage allows JavaScript sites and apps to store key-value pairs in a web browser with no expiration date. This data persists even after the browser window is closed.
Session Storage
sessionStorage is similar to localStorage, but the data is stored only for the duration of the page session. The data is cleared when the page session ends (i.e., when the tab is closed).
IndexedDB
IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. It uses indexes to enable high-performance searches of this data.
Storage Buckets
The Storage Buckets API allows sites to organize data into buckets, which can be prioritized and evicted independently. This is useful for separating high-value data from low-value data.
That's a wrap!
That's all there is to this demo. Want to check out another one?
