Question

我使用以下方法通过使用Java脚本单击按钮来打开和关闭选项卡。

这是html：

<div class="header_nav_icon" onclick="chartButton()" >
    <i class="fas fa-chart-pie"></i>
</div>

<div id="chart_sidebar" >
    <a href="#">charts</a>
</div>

这是CSS：

#chart_sidebar{
   display: none;
   top: 55;
   width: 340px;
   height: 100%;
   float:left;
}

这是Javascript：

function chartButton() {

   var x = document.getElementById("chart_sidebar");

   if (x.style.display === "block") {
       x.style.display = "none";
   } else {
       x.style.display = "block";
   }

}

当我单击选项卡时，它会打开，但是刷新页面时，它将恢复为默认设置。

我希望浏览器记住边栏即使刷新也保持打开状态。

Answer 1

您可以使用HTML5的localStorage来存储侧栏的状态，该侧栏需要持续到显式删除为止。

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

如果还可以，并且关闭浏览器后丢失会话信息，则也可以使用sessionStorage。它在页面重新加载和还原时持续存在。

//样本

// This is for when the page loads
const sideBarElement = document.getElementById("chart_sidebar")
sideBarElement.style.display = (sessionStorage.sideBarOpen ? sessionStorage.sideBarOpen : false) ? "block" : "none"

function chartButton() {
  const sideBarOpen = sessionStorage.sideBarOpen ? sessionStorage.sideBarOpen : false
  const sideBarElement = document.getElementById("chart_sidebar")

  sideBarElement.style.display = sideBarOpen === true ? "none"
  sessionStorage.sideBarOpen = !sideBarOpen
}

Answer 2

我建议使用URL保存这种状态。使用URL时，您可以与其他人打开或关闭侧边栏共享链接，从而使他们看到的内容与您看到的相同，而无需他们单击周围的内容来跟踪您。

通常，这意味着您需要操纵浏览器的URL（例如，切换侧栏时为history.replaceState），并在加载/打开网页时读取URL，以检查最初为侧栏设置的状态。

我怀疑您需要客户端解决方案，而不是将服务器更改为处理不同的URL，因此建议您使用URL的哈希（#）部分，该部分不会发送到服务器。

Answer 3

请..简单点;）

const ChartSideBar = document.getElementById("chart_sidebar");

if (!sessionStorage.getItem('sideBarDisplay')) {
  sessionStorage.sideBarDisplay = 'none';
}

ChartSideBar.style.display = sessionStorage.sideBarDisplay;


function chartButton() {
  ChartSideBar.style.display = (ChartSideBar.style.display==='block') ? 'none' : 'Block';
  sessionStorage.sideBarDisplay = ChartSideBar.style.display;
}

    #chart_sidebar{
      display: none;
      top: 55;
      width: 340px;
      height: 100%;
      float:left;
    }

<div class="header_nav_icon" onclick="chartButton()" >
  <i class="fas fa-chart-pie"></i>
</div>

<div id="chart_sidebar" >
  <a href="#">charts</a>
</div>

Answer 4

在JavaScript顶部，添加以下代码：

window.onload = function() {
    if (localStorage.getItem("chartSidebarStyle")) {
        document.getElementById("chart_sidebar").style.display = localStorage.getItem("chartSidebarStyle");
    }
};

然后在每次函数运行时设置项目：

function chartButton() {
    var x = document.getElementById"chart_sidebar");
    if (x.style.display === "block") {
        x.style.display = "none";
        localStorage.setItem("chartSidebarStyle", "none");
    } else {
        x.style.display = "block";
        localStorage.setItem("chartSidebarStyle", "block");
    }
}

现在，即使您关闭页面后，只要您继续使用同一浏览器来查看页面，它仍然可以工作（因为localStorage仅将项保存到您用于查看网页的浏览器中）。

希望这会有所帮助！

我希望边栏刷新后保持打开状态

4 个答案: