<div id="main-container">
  <select id="categories-select">
    <option value="">--Please choose a category--</option>
  <select>
</div>
const APIROOT = 'https://www.thecocktaildb.com/api/json/v1/1/';
const CONTAINER = document.querySelector('#main-container');
const CATEGORIES_SELECT = document.querySelector('#categories-select');

function getCategories() {
  let categoriesJSON = localStorage.getItem('categories');
  if (categoriesJSON) {
    console.log('Categories retrieved form local storage');
    displayCategoryData(JSON.parse(categoriesJSON));
  }
  else {
    fetch(APIROOT + 'list.php?c=list').then((response) => {
      if (response.status !== 200) {
        console.log('Status Code: ' + response.status);
        return;
      }
      response.json().then((data) => {
        console.log('Categories retrieved form remote data');
        localStorage.setItem('categories', JSON.stringify(data));
        displayCategoryData(data);
      });
    }).catch((error) => {
      console.log(error);
    });
  }
}

function displayCategoryData(data) {
  let selectedCategory = localStorage.getItem('selectedCategory');
  data.drinks.forEach(item => {
    let opt = document.createElement('option');
    opt.appendChild( document.createTextNode(item.strCategory) );
    opt.value = item.strCategory;
    if (selectedCategory == item.strCategory) {
       opt.setAttribute('selected','');
       console.log('Selection retrieved: ' + item.strCategory);
    }
    CATEGORIES_SELECT.appendChild(opt);
  });
}

function saveSelection() {
  console.log('Selection saved: ' + this.value);
  localStorage.setItem('selectedCategory',this.value);
}

window.addEventListener('storage', function(e) {
 console.log(e);
});
CATEGORIES_SELECT.addEventListener('change',saveSelection);
getCategories();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.