replaceHost

const modalContainer = document.createElement("div");
modalContainer.setAttribute("style", "font-family:sans-serif;z-index:999999999999999;line-height:1.6;position:fixed;background:rgba(0,0,0, .5);left:0;top:0;bottom:0;right:0;");

const modal = document.createElement("div");
modal.setAttribute("style", "position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);background:#FFF;padding:1em;min-width:20em;");

const list = document.createElement("ol");
list.setAttribute("style", "list-style:decimal;padding-left:1em;");

const form = document.createElement("form");
form.setAttribute("style", "display:flex;");
form.addEventListener("submit", saveHost);

const input = document.createElement("input");
input.type = "text";
input.name = "hostname";

const button = document.createElement("button");
button.appendChild(document.createTextNode("💾"));

form.appendChild(input);
form.appendChild(button);
modal.appendChild(form);

modal.appendChild(list);
modalContainer.appendChild(modal);
document.body.prepend(modalContainer);

document.addEventListener("keyup", onKeyUp);
render();

function onKeyUp(event) {
  console.log(event.key);
  if(event.key === "Escape") {
    return empty(modalContainer);
  }
  var newHost = load()[event.key];
  if(newHost) {
    document.removeEventListener("keyup", onKeyUp);
    return replaceUrl(newHost);
  }
}
function onClickButton() {
  return replaceUrl(event.currentTarget.textContent);
}

function replaceUrl(newHost) {
  window.location.host = newHost;
}
function saveHost(event) {
  const submittedForm = event.currentTarget;
  const hosts = load() || [];
  const host = submittedForm.hostname.value;
  if(host) {
    hosts.push(host);
    save(hosts);
  }
  render();
  event.preventDefault();
}
function removeHost(host) {
  const hosts = load() || [];
  hosts.splice(hosts.indexOf(host), 1);
  save(hosts);
  render();
}

function render() {
  empty(list);
  const tList = document.createDocumentFragment();
  console.log(load());
  load().forEach(function(env) {
      let listItem = document.createElement('li');
      let button = document.createElement('button');
      button.addEventListener('click', onClickButton);
      button.appendChild(document.createTextNode(env));
      listItem.appendChild(button);
      listItem.appendChild(createCRUD(env));
      list.appendChild(listItem);
  });
  list.appendChild(tList);
}
function createCRUD(env) {
  const buttons = document.createDocumentFragment();
  const delBtn = document.createElement('button');
  delBtn.appendChild(document.createTextNode("🗑"));
  delBtn.addEventListener('click', removeHost.bind(null, env));
  buttons.appendChild(delBtn);

  return buttons;
}

function empty(node) {
  while (node.firstChild) {
      node.firstChild.remove();
  }
}

function save(item, key = 'replaceHost.hosts') {
  return localStorage.setItem(key, JSON.stringify(item));
}

function load(key = 'replaceHost.hosts') {
  return JSON.parse(localStorage.getItem(key)) || [];
}