Local storage not applying to remember the last us

Question

Local storage value saved but how to use the saved local storage used. I tried creating a function apply but the class is not applying

document.querySelectorAll("#abc, #xyz").forEach(btn => {  
    btn.addEventListener("click", () => {
        const e = document.querySelectorAll(".dog,.cat, #abc, #xyz");
        e.forEach(el => {
            el.classList.toggle("red");
var xyz = document.getElementById("xyz").className;
localStorage.setItem("vovo", xyz);
        });   
    }); 
})

function apply(){
 var xy = localStorage.getItem('vovo');
 if (xy) {
    var single = document.querySelectorAll(".dog,.cat, #abc, #xyz");
    single.forEach(el => {
        el.classList.add(xy);
        });  
 }
};

Answer 1

The functionality logic :

• when a button is pressed we check if it has the red class (as all the elements, buttons and the other divs, will receive the red class at some point).
  • if it has that class then it will be toggled (it will be removed from all the buttons and the other divs) thus the localStorage will store something like "No the elements don't have the red class".
  • if it doesn't has it the it will be toggled (it will be added to all the buttons and the other divs) thus the localStorage will store something like "Yes the elements have the red class".
  • basically, the localStorage will store '0' if the class isn't applied, '1' if the class is applied.

• now, when the page gets refreshed, we check if the localStorage item that stores the red class' state is there (not null) and has the value of '1' then apply that class to all the elements (the buttons and the other divs).

• remove the item that holds the red class' state from the localStorage.

Here's the update JavaScript code :

Sorry for everyone as I can't make a live demo using SO's snippets as the localStorage can't be reached because the code is sandboxed.

Anyway, here's a CodePen demo illustrating the required functionality.

const els = document.querySelectorAll('.dog,.cat, #abc, #xyz');

/** when the page finishes loading **/
document.addEventListener('DOMContentLoaded', () => {
    /** check if the 'red' class was applied **/
    applied = window.localStorage.getItem('class-applied') === '0' ? false:true;
  /** remove "class-applied" item from the localStorage **/
  window.localStorage.removeItem('class-applied');
  /** if the "red" class was applied just apply it on document load **/
  applied && els.forEach(el => el.classList.add('red'));
});

els.forEach(btn => {
  btn.addEventListener('click', () => {
    /** store the "red" class' state : '1' means it is applied, '0' means it isn't apllied **/
    window.localStorage.setItem(
      'class-applied',
      !btn.classList.contains('red') ? '1' : '0'
    );
    els.forEach(el => el.classList.toggle('red'));
  });
});

The above code should be placed just before </body>.

Answer 2

just use the following syntax:

localStorage.setItem('myLocalStorageVariable', 'myValue');

If you want to read the value instead:

localStorage.getItem('myLocalStorageVariable')