Как сохранить цветные ящики в локальном хранилище?

Question

Я хочу сохранить эти цветные блоки div в локальном хранилище при отправке (входное значение будет добавлено в блок div как backgroundColor) заранее спасибо !!

const
  container = document.querySelector('.save-boxes .container'),
  myForm = document.getElementById('myForm');
myForm.addEventListener('submit', addBox);

// Adding div element
function addBox(e) {
    e.preventDefault();
    let inputVal = input.value; // value
    if(!inputVal) return;  

    let box = document.createElement('div');
    box.className = 'hex-bg';
    box.style.backgroundColor = input.value;

    // hex-text
    let hexText = document.createElement('div');
    hexText.classList.add('hex-text');
    hexText.textContent = input.value;

    box.appendChild(hexText); // append input text on div   

    container.appendChild(box); // apppend 'hex-bg' div
    box.addEventListener('click', remove);

    this.reset();
}

// removing element on click
function remove() {
    let parent = this.parentElement;
    parent.removeChild(this); 
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.hex-bg {
  align-items: center;
  border: 1px solid #ccc;
  display: flex;
  height: 200px;
  justify-content: center;
  width: 200px;
}

<form id="myForm">
    <input id='input' type="text" placeholder="#821ab9" autofocus autocomplete="off" maxlength="7">
    <button>add</button>
   </form>

<!-- color boxes added from javascript -->
<div class="save-boxes">
    <div class="container">

       <!-- the sample div will be added..
        <div class="hex-bg" style="background-color: #fc06cc;">
            <div class="hex-text">#fc06cc</div>
        </div>
        -->

    </div>
</div>

Пример того, как это работает: