Window.sessionStorage

Question

我正在玩基于w3schools.com上显示的示例的标签。利用他们的例子，我已经根据自己的喜好调整了html和css，但是我遇到了页面重新加载的问题。我想在页面重新加载时返回上一个选定的选项卡（即活动选项卡），无论是通过点击重新加载按钮还是通过提交按钮将数据发送到数据库。

下面发布的javascript首先隐藏标签页内容，然后清除所有活动标签，然后将点击的任何标签设置到活动标签，同时清除上一个活动标签。

我使用了java脚本中的制表符清除代码，并且当我点击其他标签时，一直遇到不清除活动标签的问题，和/或在我重新加载时清除所有内容。

所以我开始做一些研究，并尝试在MDN上使用sessionstore（）作为一种可能性。 MDN的基本示例完全有意义，但将它们应用于此选项卡设计对我来说并不直观。我在用户登录时启动了一个会话，因此有一个会话可以利用。

我在这个网站上看到了一些与此相关的问题，但我无法将其转化为此。

不知道我是否在这上面咆哮错误的树，但不管怎么说我想将当前标签存储在当前会话中，以便用户返回到该标签页页面重新加载或点击提交按钮以向数据库发送/获取数据。

我正在摆弄的代码如下：

function openEDO(event, plannerName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(plannerName).style.display = "block";
    event.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click()

/* Style the tab */
div.tab {
    overflow: hidden;
    background-color: #CECECE;
    border: 0px solid #003399;
    width: 1200px;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    color: #003399;
    font-family: Helvetica;
    float: left;
    border: 0px solid;
    width: 150px;
    height: 50px;
    cursor: pointer;
    padding: 5px 5px;
    transition: 0.3s;
    font-size: 15px;
    float:left
    text-align: center;
    font-weight:bold;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ffcc00;
    color: #003399;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #003399;
    color: #ffcc00;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    animation: fadeEffect 0.3s;
    width: 1190px;
}

/* Fade in tabs */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}

<div class="tab">
  <button class="tablinks" onclick="openEDO(event, 'Home')" id="defaultOpen">Home</button>
  <button class="tablinks" onclick="openEDO(event, 'PI')">Personal Info</button>
  <button class="tablinks" onclick="openEDO(event, 'PH')">Professional History</button>
  <button class="tablinks" onclick="openEDO(event, 'P1')">Plan 1</button>

<div id="Home" class="tabcontent">
</div>

<div id="PI" class="tabcontent">
</div>

<div id="PH" class="tabcontent">
</div>

<div id="P1" class="tabcontent">
</div>

使用此代码，页面始终在页面加载时返回主页。显然我可以删除它并且没有tab是“默认”页面，或者使其他页面成为页面重新加载时的默认页面。但我想要的是能够回到当前会话的最后一个标签。当用户首次登录并开始新会话时，我还想保留当前在主页启动的功能。

如果有人能帮助我解决这个问题，我将永远感激不尽。

Answer 1

您可以在本地存储或会话存储吗？在用户使用您的应用时设置标签索引的值。在页面加载时，您可以读取localstorage或会话存储的值，并使用基本的javaScript专注于您想要的任何选项卡。

Answer 2

使用localStorage或sessionStorage来记住有效标签。我已经修改了JavaScript代码，但遗憾的是StackOverflow的代码段iframe不允许您访问存储空间，因此您必须在不同的环境中对其进行测试。

function openEDO(event, plannerName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(plannerName).style.display = "block";
    event.currentTarget.className += " active";
    
    // remember current tab
    localStorage.setItem('activeTabId', plannerName);
}

// restore current tab
var activeTabId = localStorage.getItem('activeTabId');
if (activeTabId) {
  document.getElementById(activeTabId).click();
} else {
  document.getElementById('defaultOpen').click()
}

/* Style the tab */
div.tab {
    overflow: hidden;
    background-color: #CECECE;
    border: 0px solid #003399;
    width: 1200px;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    color: #003399;
    font-family: Helvetica;
    float: left;
    border: 0px solid;
    width: 150px;
    height: 50px;
    cursor: pointer;
    padding: 5px 5px;
    transition: 0.3s;
    font-size: 15px;
    float:left
    text-align: center;
    font-weight:bold;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ffcc00;
    color: #003399;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #003399;
    color: #ffcc00;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    animation: fadeEffect 0.3s;
    width: 1190px;
}

/* Fade in tabs */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}

<div class="tab">
  <button class="tablinks" onclick="openEDO(event, 'Home')" id="defaultOpen">Home</button>
  <button class="tablinks" onclick="openEDO(event, 'PI')">Personal Info</button>
  <button class="tablinks" onclick="openEDO(event, 'PH')">Professional History</button>
  <button class="tablinks" onclick="openEDO(event, 'P1')">Plan 1</button>

<div id="Home" class="tabcontent">
</div>

<div id="PI" class="tabcontent">
</div>

<div id="PH" class="tabcontent">
</div>

<div id="P1" class="tabcontent">
</div>

Answer 3

使用sessionStorage，在每个按钮上添加id，在页面加载时检查sessionStorage是否已设置？如果是，请单击活动按钮。否则，请单击默认主页按钮：

在您的函数openEDO中首先使用：

设置sessionStorage

sessionStorage.setItem('sel_tab', plannerName);

https://jsfiddle.net/dalinhuang/2a6nsvp8/

JS：

  var seltab = sessionStorage.getItem('sel_tab');
  if (seltab) {
    document.getElementById("Btn" + seltab).click();
  } else {
    document.getElementById("BtnHome").click();
  }

HTML：

  <button class="tablinks" id="BtnHome" onclick="openEDO(event, 'Home')">Home</button>
  <button class="tablinks" id="BtnPI" onclick="openEDO(event, 'PI')">Personal Info</button>
  <button class="tablinks" id="BtnPH" onclick="openEDO(event, 'PH')">Professional History</button>
  <button class="tablinks" id="BtnP1" onclick="openEDO(event, 'P1')">Plan 1</button>

Window.sessionStorage

REF：https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage

Javascript，在重新加载时返回上一个选项卡

3 个答案:

https://jsfiddle.net/dalinhuang/2a6nsvp8/

Window.sessionStorage