Browser Cache 💾
Cache Storage Demo 🗃️
The Application panel in DevTools allows you to inspect and manage various storage types, including Cache Storage.
Cache Operations:
Cache status: not initialized
How to View Cache Storage: 👀
- Open DevTools (F12 or Right-click → Inspect) 🛠️
- Navigate to the "Application" tab 📱
- In the left sidebar, expand "Cache" under "Storage" 📂
- Click on "Cache Storage" to see all caches 🗄️
- Click on specific cache names to view their contents 📋
How to Verify Network Caching: ✅
- Open DevTools (F12) and go to the "Network" tab 🌐
- Click "Add to Cache" button to cache resources ➕
- Click "Fetch from Cache" to load from cache 🔍
- Look for resources in the Network panel with "from disk cache" or "from memory cache" status 💽
- Note how subsequent requests are served from cache without network activity ⚡
Cache API Features 🚀
The Cache API allows for storing network requests and responses for offline use or performance benefits:
- Add (put/add): Store responses in the cache ➕
- Match: Retrieve cached responses 🔍
- Update: Replace existing cached responses 🔄
- Delete: Remove items from cache ❌
- Keys: List all cached URLs 🔑