如何使用 sessionStorage 在 JavaScript 中保持 css 样式更改

Question

I am trying to make a button that toggles the CSS display property between block and none. I'm trying to make it so a user can turn a background colour on and off, and then keep the selection when they move between pages. Just to be more awkward, I have to be able to do this with inline-CSS and vanilla JavaScript only.

So far, I've managed to get the display property to toggle, but I can't work out how to implement sessionStorage. I've tried this a million different way. The example below was my latest attempt.

Any help would be hugely appreciated :)

<div onchange="colours()" id='red' width='100%' height='auto' style="background-color:red; padding: 20%; display:block;">
  
</div>
<button  id="button" style='font-size: 200px;'>test</button>

var e = document.getElementById('red');

() => {

    if (sessionStorage.getItem('divColor') === '1'){
        e.style.display = "none";
    }
  else{
    e.style.display = "block";
  }
}



document.getElementById('button').addEventListener('click', function() {
  if (e.style.display === 'block') { 
  e.style.display = 'none';
     sessionStorage.setItem("divColor", 1);
  } else { 
  e.style.display = 'block';
  }
});

Answer 1

You could use cookie storage: Explanation: After changing the background in the function then save it inside a cookie and set the cookie expiring date, the expiring date might be one day or any time, and always check if the cookie is set if not prompt the client to change the page background, and once the cookie is set, use the color value stored in the cookie to set the page background, and once the browsers stores the cookie it will always be available for use, i think this is a better way to do such a thing on the website. Hope this explanation is useful

Answer 2

I figured out my problem! It took all weekend but I did it (I'm new to JS so small wins mean a lot).

<button id="button" style="padding: 20px";>test</button>
  
<p id="text" style="font-size:200px; padding: 0; margin: 0; text-transform: uppercase; background-color:red;">change me</p>

var button = document.getElementById('button');

var text = document.getElementById('text');

var key = sessionStorage.getItem ('key');

var obj = JSON.parse(key);


if (key)
  {text.style.background = obj};

button.addEventListener('click', textChange);

function textChange (test) {
  if (text.style.backgroundColor === 'red') {
    text.style.backgroundColor = 'blue';
    sessionStorage.setItem ('key', JSON.stringify (text.style.backgroundColor));
  } else {
    text.style.backgroundColor = 'red';
     sessionStorage.removeItem ('key');
  } 
  }