using session storage to store user position

Question

I have a one page application that I wrote using mostly vanilla js. Because is an one page application, when a user reload the page it start from the beginning, so I'm wondering if there is a way to use session storage to save user position in the page. So when he refresh the page, the position remains the last one.

The page works like that: when a user click one of the main button, the item get the class active and is content is expanded to all the screen, the body also get the class has-expanded-item and all his children that doesn't have the class active disappear.

This is the code that handle the menu switching:

class BoxLayout{
  constructor(menuVoices,buttonHandler){
    this.wrapper = document.body;
    this.menuVoices = menuVoices;
    this.closeButtons = Array.from(document.querySelectorAll('.close-section'));
    this.expandedClass = 'is-expanded';
    this.hasExpandedClass = 'has-expanded-item';
    this.buttonHandler = buttonHandler;
    this.init()
  }

  init(){
    this._initEvents()
  }

  _initEvents(){
    let self = this;
    this.menuVoices.forEach(function(el){
      el.addEventListener('click',function(){
          self._openSection(this) //this fn give to the element the class active
          self.buttonHandler.disable(this,this.nextElementSibling)
      });
    });
    this.closeButtons.forEach(function(el){
      el.addEventListener('click',function(el){
        el.stopPropagation();
        self._closeSection(this.parentElement)
        self.buttonHandler.enable(this.nextElementSibling)
      })
    });
  }

  _openSection(el){
    if(!el.parentElement.classList.contains(this.expandedClass)){
      el.parentElement.classList.add(this.expandedClass);
      this.wrapper.classList.add(this.hasExpandedClass)
    }
  }

  _closeSection(el){
    if(el.classList.contains(this.expandedClass)){
      el.classList.remove(this.expandedClass);
      this.wrapper.classList.remove(this.hasExpandedClass)
    }
  }
}

now when i click on, for instance, the about section, the parent element of the about button get the active class, i want to save the state in a session storage but i dont know how to do, first time I'm using this api

Answer 1

for now i found this solution using session storage, giving for each section a data attribute, but could be also an id:

 _openSection(el){
    el.parentElement.classList.toggle(this.expandedClass);
    this.wrapper.classList.add(this.hasExpandedClass);
    sessionStorage.setItem('section',el.parentElement.dataset.section)
}

in the main js:

const sections = Array.from(document.querySelectorAll('.section'));  
if(sessionStorage.length){
      sections.forEach(function(section){
        if(section.dataset.section === sessionStorage.getItem('section')){
          section.classList.add('is-expanded')
          document.body.classList.add('has-expanded.item')
        }
      })
    }