Persisting Data with IndexedDB
- Understand how to leverage IndexedDB to store offline data
- Provide a user experience that works regardless of network connectivity
a client-side storage mechanism for persisting data in a user's browser regardless of network availability
What other options do we have for storing data in the browser?
- Cookies: pre-HTML5, can't store much data
- LocalStorage & Sessionstorage: adheres to CORS, can store more information
- Cache Storage: built-in with the browser, expanded to support Service Workers and AppCache
Why so many options?
- increasing complexity of applications required more flexibility in storage
- each storage option varies in size limits, security, persistence and allowed data types
- the internet is terrible and we don't know what we're doing
What is IndexedDB good for?
- storing larger and more complex datasets (within reason)
- persisting data without expiration so it can be available offline
- robust querying
- the API is absolutely brutal
Fetch and checkout the '03-before-db' branch of the markdown previewer repo
- brought in webpack, updated SW cache to add `bundle.js`
- added a drop-down menu of saved markdowns to select
What Are Our Goals?
- Save markdowns to IndexedDB
- Load all saved markdowns into the drop-down menu
- Select a saved markdown from the drop-down menu to display in the textareas