Как сохранить выбранный цвет указанных c кнопок в локальном хранилище?

Question

Я хочу сохранить выбранный цвет указанных кнопок c в локальном хранилище, чтобы он был доступен в следующий раз. Я действительно не знаю, как это можно сделать и с чего начать. Поэтому любая помощь будет очень полезна, чтобы помочь мне начать работу. Я понимаю, что мне нужно использовать localstorage.setitem и localstorage.getitem, но я не знаю, как.

Заранее спасибо! Код ниже:

$("[data-toggle=popover]").popover
({
    html: true,
    sanitize: false,
    trigger: 'focus',
    content: function()
    {
      return $('#popover-content').html();
    }
  });
  let targetBtn;
  document.querySelectorAll('.myBtn').forEach((item) =>
  {
    item.addEventListener('click', (e) =>
    {
      targetBtn = e.target;
    })
  })
  function myFunction(color)
  {
    if (targetBtn)
    {
      targetBtn.style.background = color;
    }
  }

    .popover-content
    {
      display: flex;
      justify-content: space-around;
      align-items:center;
      background: #efefef;
      width: 230px;
      height: 80px;
    }
    .close
    {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      position: absolute;
      top:0px;
      left:210px;
    }
    .close:hover,
    .close:focus
    {
      color: #000;
      text-decoration: none;
      cursor: pointer;
      transition: 0.5s;
    }
    .myBtn
    {
      background-color: #DCDCDC;
      border: 0.5px solid #808080;
      color: white;
      width: 30px;
      height: 30px;
      border-radius: 6%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
    .total-green-cross-container
    {
      display:flex;
      align-items: start;
      flex-direction: column;
    }
    .green-cross-container-center
    {
      margin-left: 69px;
      margin-top:3px;
    }
    .green-cross-container
    {
      margin-top:3px;
    }
    .demo1
    {
      background-color: red;
      border: none;
      color: white;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
    .demo2
    {
      background-color: green;
      border: none;
      color: white;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
    .demo3
    {
      background-color: blue;
      border: none;
      color: white;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
    .hide
    {
      display: none;
    }

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
<div class = "total-green-cross-container">
    <div class = "green-cross-container-center">
      <button class="myBtn" data-toggle="popover" data-placement="bottom" data-html="true">1</button>
      <button class="myBtn" data-toggle="popover" data-placement="bottom" data-html="true">2</button>
      <button class="myBtn" data-toggle="popover" data-placement="bottom" data-html="true">3</button>
    </div>
  </div>
  <div id="popover-content" class="hide">
    <button class="demo1" onclick="myFunction('red')">Red</button>
    <button class="demo2" onclick="myFunction('green')">Green</button>
    <button class="demo3" onclick="myFunction('blue')">Blue</button>
    <span class="close">&times;</span>
  </div>