Javascript 使用会话存储存储用户位置

我有一个主要使用香草js编写的示例。 因为它是一个单页应用程序，当用户重新加载页面时，它会从头开始，所以我想知道是否有一种方法可以使用会话存储来保存用户在页面中的位置。因此，当他刷新页面时，位置仍然是最后一个

该页面的工作原理如下：当用户单击一个主按钮时，该项目将获得类

活动

，其内容将扩展到所有屏幕，主体也将获得类

已扩展项目

，并且其所有未激活该类的子项将消失

这是处理菜单切换的代码：

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)
    }
  }
}

---

现在，当我点击about部分，about按钮的父元素获取活动类时，我想将状态保存在会话存储中，但我不知道怎么做，第一次使用这个api时，你可以使用会话存储或只是客户端cookie，但这将不允许书签、共享链接，或历史记录，以便按照用户的预期工作。在我看来，最好的选择是使用像

example.com/index.php#experience

这样的链接，或者使用history.pushState（）

如果

example.com/index.html

执行

重写（“体验”）

，浏览器将把地址栏更改为

example.com/experience.html

，而不刷新页面

一旦您将

experience.html

重定向到

index.html？experience

之类的内容，此技术就可以进行书签等操作，脚本可以通过重写URL来处理这些内容。如果您有任何服务器端经验，您可以非常轻松地编写URL重写脚本

简单的重写 experience.html

location.href（'index.html？experience'）

index.html

---

目前，我发现这个解决方案使用会话存储，为每个部分提供一个数据属性，但也可以是一个id：

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

在主要内容中：

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')
        }
      })
    }

---

浏览器中的与Cookie或任何服务器端无关。@MikeMcCaughan你是对的，我对会话的服务器端概念感到困惑，会话通常通过客户端cookiethanks持久化，但没有服务器端代码来处理会话app@LimeInTheCoconut您不需要任何服务器端代码，这就是最后一段的内容，一个纯javascript解决方案，但我只有一个index.hml文件，而不是experience.html about.html等。关于堆栈溢出代码的问题要求该代码出现在这个网站上。不清楚您是否在询问其他网站上的代码。关于如何使用

会话存储

，您有什么具体问题吗？否则这个问题就相当模糊了。我更新了这个问题，希望更清楚不是答案，但是

classList

有一个

toggle

函数，可以根据类的存在来添加或删除该类，所以您不需要

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

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')
        }
      })
    }