Is it possible to store an entire element into a localstorage or else?

Question

I know that i ask the most silliest, but since i'm not familiar and i'm totally a beginner in localstorage i want to see the mechanic of the code how it is working as it should be else . I have created a div box and also two buttons , i want to be able to change the color of that box and store it in a localstorage , so that after refreshing i want end up with the background color of my stylesheet which is Red. So meaning when i change to Blue color after refshing the page to remain that color . Like i sad im pretty much new to localstorage and their use. Anyway thank you for the help that you can give me , i know its again a silly question but im very intresed to that. My javascript code is below as you can see:

var red=document.getElementById("red");
var blue=document.getElementById("blue");


var redColor='red';
var blueColor='blue';

localStorage.setItem('RColor',redColor);
localStorage.setItem('BColor',blueColor);


red.onclick=function red(){
   document.getElementById("box").style.backgroundColor=localStorage.getItem('RColor');


};
blue.onclick=function blue(){
    document.getElementById("box").style.backgroundColor=localStorage.getItem('BColor');


} ;

Answer 1

Alternatively, if you don't want to repeat yourself with every colour, just place the colour on the button using a data attribute.

So something like:

// your default color
var defaultColor = "red";

// grab all buttons
var buttons = document.querySelectorAll(".set-color");

// loop over them
for (const button of buttons) {

  // apply the btn style (optional)
  button.style.color = button.dataset.text || "unset";
  button.style.backgroundColor = button.dataset.bg || "unset";
  button.style.border = 0;

  // attach a click event to the button
  button.addEventListener("click", function(e) {
    // set element bg color and assign in to localstorage 
    document.getElementById(
      "box"
    ).style.backgroundColor = localStorage.color = this.dataset.bg;
  });
}

// setup the initial state
document.getElementById("box").style.backgroundColor =
  localStorage.color || defaultColor;

#box {
  display: block;
  width: 50px;
  height: 50px;
}

<div id="box"></div>

<button class="set-color" data-bg="red" data-text="black">red</button>
<button class="set-color" data-bg="blue" data-text="white">blue</button>
<button class="set-color" data-bg="#000000" data-text="white">#000000</button>
<button class="set-color" data-bg="#ff55aa">#ff55aa</button>

Answer 2

You don't need separate items (RColor and BColor) for the two colors in your localStorage.

Just add a common item called say, boxColor to your localStorage then just toggle its value based on which button is clicked. Now just create a function say, getColor that sets the color of your div based on the boxColor item and run that function when the page loads as well as when any of the two buttons are clicked.

Check the following Code Snippet for a practical example of the above approach.

However, running the following code snippet won't work because StackOverflow doesn't allow you to use localStorage in their code sandbox so you can check this JSFiddle instead to see it in action.

var red = document.getElementById("red");
var blue = document.getElementById("blue");
var box = document.getElementById("box");


var redColor='red';
var blueColor='blue';

function getColor(){
  box.style.backgroundColor=localStorage.getItem('boxColor');
}

red.onclick=function red(){
    localStorage.setItem('boxColor', redColor);
    getColor();
};

blue.onclick=function blue(){
    localStorage.setItem('boxColor', blueColor);
    getColor();
};

getColor();

#box {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  padding: 0;
}

<button id="red">Red</button>
<button id="blue">Blue</button>
<div id="box"></div>

Answer 3

Check my comments below. This is one sample usage.

var redColor = 'red';
var blueColor = 'blue';

// When opening, read the Color value from localStorage. If it not set, then use the default color (say red)
document.getElementById("box").style.backgroundColor = localStorage.getItem('Color') || redColor;

var red = document.getElementById("red");
var blue = document.getElementById("blue");

red.onclick = function red() {
    // Once user click on red button, Change the box background and update localStorage with Color
    localStorage.setItem('Color', redColor);
    document.getElementById("box").style.backgroundColor = redColor;
};

blue.onclick = function blue() {
  // Once user click on blue button, Change the box background and update localStorage with Color
  localStorage.setItem('Color', blueColor);
  document.getElementById("box").style.backgroundColor = blueColor;
};