简单的重写事物

Question

我有一个one page application我用大多数香草js写的。因为是一个单页面应用程序，当用户重新加载页面时，它从头开始，所以我想知道是否有办法使用会话存储来保存页面中的用户位置。因此，当他刷新页面时，位置仍然是最后一个。

页面的工作方式如下：当用户单击其中一个主按钮时，该项目将获得类active并且内容将扩展到所有屏幕，正文也会获得类has-expanded-item并且所有没有上课的孩子都会消失。

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

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

Answer 1

您可以使用会话存储或仅使用客户端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来处理这些内容。如果您有任何服务器端经验，则可以非常轻松地编写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')
        }
      })
    }

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

2 个答案:

简单的重写事物

experience.html

的index.html