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

Question

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

该页面是这样工作的：当用户单击主按钮之一时，该项目获得 class active 并且内容扩展到所有屏幕，正文也获得class has-expanded-item 和他所有没有 class 活动的 children 都消失了。

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

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

现在，例如，当我单击“关于”部分时，“关于”按钮的 parent 元素处于活动状态 class，我想将状态保存在会话存储中，但我不知道该怎么做，我第一次使用这个 api

Answer 1

您可以使用 session-storage 或只是一个 client-side cookie，但这将不允许书签、共享链接或历史记录按用户预期的那样工作。在我看来，最好的选择是使用 example.com/index.php#experience 之类的链接，或者使用 history.pushState();

function rewrite(page){
    var stateObj = { index: page };
    history.pushState(stateObj, page, page+".html");
}

如果example.com/index.html执行rewrite("experience")，浏览器会将地址栏更改为example.com/experience.html而不刷新页面。

一旦您将 experience.html 重定向到 index.html?experience 之类的内容，此技术就可以允许添加书签等，您的脚本通过重写 URL 来处理这些内容。如果您有任何 server-side 经验，您可以非常轻松地编写 URL 重写脚本。

简单的重写东西

experience.html

location.href('index.html?experience')

index.html

function rewrite(page){
        var stateObj = { index: page };
        history.pushState(stateObj, page, page+".html");
}

rewrite(window.location.search.substr(1));//Grab page from querystring

Answer 2

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

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

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

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

using session storage to store user position

javascript

session-storage

简单的重写东西

experience.html

index.html