[Solved] Local storage not applying to remember the last user input for the class toggle

by


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>.

2

solved Local storage not applying to remember the last user input for the class toggle