javascript - 存储选项卡的数据和信息

Question

我的网站中有以下代码行 - http://codepen.io/anon/pen/rOJNoe

<div class="nav-wrapper">
  <ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#EXOBusinessModules" data-toggle="pill">Tab 1</a></li>
    <li><a href="#EXOEmployerServiceModules" data-toggle="pill">Tab 2</a></li>
  </ul>
</div>

<div class="tab-content">
  <div class="tab-pane fade in active" id="EXOBusinessModules">

    <div class="proof-points-3">
      <span id="EXOBusinessModules" class="anchor anchor-sticky"></span>

      <div class="proof-point">
        <span id="EXOOn-The-Go" class="anchor anchor-sticky"></span>
        <a href="#">
          <h4>Lorem ipsum dolor sit amet</h4>
        </a>
      </div>

      <div class="proof-point">
        <span id="EXOAdd-ons" class="anchor anchor-sticky"></span>
        <a href="#">
          <h4>Consectetur adipiscing elit</h4>
        </a>
      </div>
    </div>
  </div>

  <div class="tab-pane fade" id="EXOEmployerServiceModules">

    <div class="proof-points-3">
      <span id="EXOEmployerServiceModules" class="anchor anchor-sticky"></span>

      <div class="proof-point">
        <span id="EXOPayroll" class="anchor anchor-sticky"></span>
        <a href="#">
          <h4>Curabitur dapibus mi tellus</h4>
        </a>
      </div>

      <div class="proof-point">
        <span id="EXOEmployeeInformation" class="anchor anchor-sticky"></span>
        <a href="#">      
          <h4>cursus et interdum sit amet</h4>
        </a>
      </div>
    </div>
  </div>
</div>

我如何做到这一点，以便当用户选择一个选项卡(例如“选项卡 2”)然后刷新他们的浏览器(或转到另一个页面并返回此处)时，它会存储他们之前所在的选项卡？

Answer 1

最简单的方法是使用 HTML5 本地存储。你可以用 JS 做到这一点:

// Check if tab is set. If it is, keep it. If not, set default tab to tab1
if(localStorage.tab == undefined)
    localStorage.tab = 1;

// Use whatever code you have to go to that tab (I don't know what you have...)
goToTab(localStorage.tab);

如果你愿意，你也可以使用 JS 或 PHP cookie，但我认为这种方法不那么繁琐并且更容易。