代码之家 › 专栏 › 技术社区 › Giacomo Ciampoli

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

session-storage javascript

Giacomo Ciampoli · 技术社区 · 8 年前

我有一个 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

2 回复 | 直到 8 年前

Community Mohan Dere 6 年前

您可以使用会话存储或只是客户端cookie,但这将不允许书签、共享链接或历史记录按用户的预期工作。在我看来,最好的选择是使用以下链接 example.com/index.php#experience 或者,使用历史记录。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重写脚本。

简单的重写

经验html

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

指数html

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

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

Giacomo Ciampoli 8 年前

目前,我发现此解决方案使用会话存储,为每个部分提供一个数据属性,但也可以是一个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')
        }
      })
    }