<h1>Cocktails</h1>
<span id="message-container"></span><br>
<button id="reload-data">Reload Data</button>
<button id="clear-local">Clear IndexedDB</button>
<div class="container">
  <div id="cocktail-container" class="row"></div>
</div>
const APIROOT = 'https://www.thecocktaildb.com/api/json/v1/1/';
const CONTAINER = document.querySelector('#cocktail-container');
const MESSAGE_CONTAINER = document.querySelector('#message-container');

function getCocktails() {
  const cocktailsStore = db.transaction(["Cocktails"], "readonly").objectStore("Cocktails");
  let getCocktailData = cocktailsStore.getAll();
  getCocktailData.onsuccess = function(event) {
    if (event.target.result.length === 0) {
      MESSAGE_CONTAINER.innerHTML = "(Loading remote data)";
      loadCocktailData();
    }
    else {
      MESSAGE_CONTAINER.innerHTML = "(Displaying local data)";
      displayCocktailData(event.target.result);
    }
  }
}

function loadCocktailData() {
  fetch(APIROOT + 'filter.php?a=Alcoholic').then((response) => {
    if (response.status !== 200) {
      console.log('Status Code: ' + response.status);
      return;
    }
    response.json().then((data) => {
      const cocktailsStore = db.transaction(["Cocktails"], "readwrite").objectStore("Cocktails");
      // delete the old items in the database if there are any
      let clearCocktailRequest = cocktailsStore.clear();
      clearCocktailRequest.onsuccess = function(event) {
        // store the new items in the database
        data.drinks.forEach(item => {
          cocktailsStore.put(item);
        });
      }
      displayCocktailData(data.drinks);
    });
  }).catch((error) => {
    console.log(error);
  });
}

function displayCocktailData(data) {
  data.forEach(item => {
    CONTAINER.innerHTML += `
      <div class="col-xs-12 col-sm-6 col-md-4">
        <figure>
          <img src="${item.strDrinkThumb}" width="200">
          <figcaption>${item.strDrink}</figcaption>
        </figure>
      </div>`;
  });
}

// Indexeddb
let db;
let dbRequest = window.indexedDB.open("Cocktaildb", 1);

dbRequest.onerror = function(event) {
  alert("Database error: " + event.target.errorCode);
};
dbRequest.onsuccess = function(event) {
  db = event.target.result;
  getCocktails();
};
dbRequest.onupgradeneeded = function(event) { 
  const db = event.target.result;

  let cocktailStore = db.createObjectStore("Cocktails", { keyPath : 'idDrink' });
};

function handleReloadData() {
  CONTAINER.innerHTML = "";
  getCocktails();
}

function handleClearLocal() {
  const cocktaildb = db.transaction(["Cocktails"], "readwrite").objectStore("Cocktails");
  clearCocktailRequest = cocktaildb.clear();
  CONTAINER.innerHTML = "";
  getCocktails();
}

document.querySelector('#reload-data').addEventListener('click', handleReloadData);
document.querySelector('#clear-local').addEventListener('click', handleClearLocal);

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.