You're almost there. As the other answer points out, you are not actually storing the selected color value.

You can think of localStorage as a store for key-value pairs. The syntax to set an item would be something like:

localStorage.setItem(<key>,<value>)

Where both key and value are strings. In order to store the user's color choice you'd have to do something like:

localStorage.setItem("selectedColor","#adadad")

Another missing piece is perhaps the code to load the previously selected color on page load.

PS: If you are trying to run this code in a sandbox (like the stack overflow code editor) you may not be able to access localStorage due to Cross Origin policies. Using localStorage in cases like this will throw an error (which may be why it works if you remove the localStorage part)

See sample implementation below:

const LS_COLOR_KEY = 'selected-color';

function selectColor(color){
  document.querySelectorAll('.color-option').forEach(function(node){node.classList.remove('is-selected')});
  document.querySelector('.color-option[data-color="'+color+'"]').classList.add('is-selected')
  document.documentElement.style.setProperty("--primary-color", color);
  localStorage.setItem(LS_COLOR_KEY, color);
}

document.addEventListener('DOMContentLoaded', function(){
  // Retrieve and select any previously stored color
  const storedColor = localStorage.getItem(LS_COLOR_KEY) || '#577590';
  selectColor(storedColor);
})

document.addEventListener('click', function(e){
  const colorOption = e.target.closest('.color-option');
    if (!colorOption) return;
   selectColor(colorOption.dataset.color);
})

:root {
  --primary-color: transparent;
}

.color-option > .swatch {
  height: 20px;
  width: 20px;
  margin: 0 0.25rem;
  display: inline-block;
}

.color-option {
  display: flex;
  align-items: center;
  margin: 0.25rem 0;
  padding: 0.5rem 0;
  cursor: pointer;
}

.color-option.is-selected{
  border: 1px solid blue;
}

.selected-color {
  background: var(--primary-color);
  height: 100px;
  width: 100px;
}

<div class="options">
  <ul id="color-list">
  <li data-color="#577590" class="color-option"><div class="swatch" style="background:#577590">&nbsp;</div>Queen Blue</li>
  <li data-color="#F3CA40" class="color-option"><div class="swatch" style="background:#F3CA40"></div>Maize Crayola</li>
  <li data-color="#F08A4B" class="color-option"><div class="swatch" style="background:#F08A4B"></div>Mango Tango</li>
  </ul>
</div>

<div class="selected-color"></div>

I don't think I get what you want really! but if you want to store the selected color in local storage and bring it back on every load you can save the actual value of the color and on every load, you will set the root property of the (--primary-color) to the value you stored. Like this

In your js file

let root = document.documentElement;

document.addEventListener("click", (e) => {

  const colorOption = e.target.closest(".color-option");

  if (!colorOption) return;

  // unselect currently selected color options
  document
    .querySelectorAll(".color-option")
    .forEach((colorOption) => colorOption.classList.remove("is-selected"));
  colorOption.classList.add("is-selected");

  const color = colorOption.dataset.color;

  root.style.setProperty("--primary-color", color);

  localStorage.setItem("selected-color", color);
});

window.onload = () => {
  root.style.setProperty(
    "--primary-color",
    localStorage.getItem("selected-color")
  );
};

I hope that solves what you want. thanks

please check below

localStorage.setItem('bgcolor', 'red');
localStorage.getItem('bgcolor');

now look at your code, you have used .color-option as keyName,

but used another keyName in getItem --primary-color which is wrong.

localStorage.setItem(".color-option", "--primary-color");
localStorage.getItem("--primary-color");

it should be

localStorage.setItem(".color-option", "--primary-color-value");
localStorage.getItem(".color-option");