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
<h3>What is IndexedDB</h3>

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

<h3>Client-Side Storage</h3>
<p>What other options do we have for storing data in the browser?</p>

<ul>
  <li><b>Cookies:</b> pre-HTML5, can't store much data</li>
  <li><b>LocalStorage & Sessionstorage:</b> adheres to CORS, can store more information</li>
  <li><b>Cache Storage:</b> built-in with the browser, expanded to support Service Workers and AppCache</li>
</ul>

<h3>Why so many options?</h3>
<ul>
  <li>increasing complexity of applications required more flexibility in storage</li>
  <li>each storage option varies in size limits, security, persistence and allowed data types</li>
  <li>the internet is terrible and we don't know what we're doing</li>
</ul>

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

<pre>`npm install`</pre>

<pre>`webpack --watch`</pre>

<pre>`node server.js`</pre>

<pre>`http://localhost:3000`</pre>

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