Persisting Data with IndexedDB

Goals:

  1. Understand how to leverage IndexedDB to store offline data
  2. Provide a user experience that works regardless of network connectivity

What is IndexedDB

a client-side storage mechanism for persisting data in a user's browser regardless of network availability

Client-Side Storage

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

Any Downsides?

  • the API is absolutely brutal

Let's Practice

Fetch and checkout the '03-before-db' branch of the markdown previewer repo

`npm install`

`webpack --watch`

`node server.js`

`http://localhost:3000`

What's Changed?

  • 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