Exploring Various Data Storage Mechanisms in Browsers

15min Snip

00:00

Play full episode

Summary

Transcript

Episode notes

This chapter delves into the differences between local storage, index DB, cookies, cache API, service worker, and file system API for storing data in browsers. It covers the limitations of caching, implementing a Netflix-style 'save for offline' feature using IndexedDB, utilizing media recorder and getUserMedia for storing video chunks, and handling errors like 'Failed to fetch MP3' and 'Failed to construct a response'.

Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data.

Show Notes

00:00 Welcome to Syntax!
02:07 Brought to you by Sentry.io.
02:33 The file system API.
03:08 The Cache API.
- Mozilla Developer Cache API.
- Airhorner, a good example.
04:24 Size restrictions per browser.
07:04 How tools like Riverside.fm use IndexedDB.
08:47 Data eviction (too much data).
10:16 What we’re using it for and how.
12:17 How do we do this in code?
14:37 Creating the cache.
16:18 Retrieving from cache manually.
19:00 Adding metadata.
19:37 A live debugging.
22:39 Persistent storage.
- web.dev Persistent Storage.
- Hackernoon Persistent Storage.
26:10 Media score.
- Chrome Autoplay Policy.