JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<input type="text" id="in-key" placeholder="Ключ" class="form-control">
<input type="text" id="in-val" placeholder="Значение" class="form-control">
<br>
<button id="btn-to" class="btn btn-success">скопировать в LS</button>
<button id="btn-from" class="btn btn-warning">вытащить из LS</button>
<button id="btn-list" class="btn btn-info">список ключей</button>
<dl id="list"></dl>

CSS

.container{margin-top:20px}

JavaScript

/**
 * для вопроса https://toster.ru/q/557556
 */
const dg = document.getElementById.bind(document);
const inKey = dg('in-key');
const inVal = dg('in-val');
dg('btn-to').addEventListener('click', e => {
  localStorage.setItem(inKey.value, inVal.value);
});
dg('btn-from').addEventListener('click', e => {
  inVal.value = localStorage.getItem(inKey);
});
dg('btn-list').addEventListener('click', e => {
  let list = [];
  for (let i = 0; i < localStorage.length; i++) {
    let k = localStorage.key(i);
    list.push('<dt>'+k+'</dt><dd>'+localStorage.getItem(k)+'</dd>');
    dg('list').innerHTML = list.join('\n');
  }
});