我有一個帶有一些頁面的本地檔案（它用于一個專案并且不在 Web 服務器上運行）。每個頁面都配有一個可以打開或關閉的側邊欄。由于您可以從側邊欄鏈接更改頁面，因此我曾經sessionStorage保存其當前狀態（打開/關閉），但是當我重繪 頁面時，它會一直重置為 true。
我有一個loadNav()與 body 的 onl oad 屬性關聯的函式，它初始化側邊欄的狀態（通過檢查 sessionStorage 引數）。但是，如果我使用 DevTools (F12) 檢查頁面，我會看到每次重繪 頁面時該值都會重置。據我所知它不應該發生，我不知道如何解決它也找不到解決方法。我什至嘗試過使用 localSession，但它也是如此。
這是其中一個頁面的代碼作為參考（只有“main” <div> 的內容從一個變為另一個）。它只是作為一個參考，因為 storageSession 在 StackOverflow sandobx 中不起作用。
/* Side Navbar */
function loadNav() {
if(sessionStorage.getItem("sideNavOpen")) {
openNav(false);
} else {
closeNav(false);
}
}
function openNav(transition) {
if(transition) {
document.getElementById("sidenav").style.transition = "0.5s";
document.getElementById("main").style.transition = "margin-left 0.5s";
} else {
document.getElementById("sidenav").style.transition = "none";
document.getElementById("main").style.transition = "none";
}
document.getElementById("sidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
sessionStorage.setItem("sideNavOpen", true);
}
function closeNav(transition) {
if(transition) {
document.getElementById("sidenav").style.transition = "0.5s";
document.getElementById("main").style.transition = "margin-left 0.5s";
} else {
document.getElementById("sidenav").style.transition = "none";
document.getElementById("main").style.transition = "none";
}
document.getElementById("sidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
sessionStorage.setItem("sideNavOpen", false);
}.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
}
.sidenav a {
padding: 6px 6px 6px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
white-space: nowrap;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .selected {
color: #f1f1f1;
}
.sidenav .closeButton {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.openButton {
position: fixed;
z-index: 1;
top: 0;
left: 0;
height: 50px;
align-content: center;
padding: 5px 20px;
font-size: 30px;
cursor: pointer;
backdrop-filter: blur(2px);
background-color: rgba(0,0,0,0.1); /*rgba(255,255,255,0.6);*/
border-radius: 0 0 10px 0;
}
body {
font-family: "Lato", sans-serif;
}<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sprint0</title>
<link rel="stylesheet" type="text/css" href="../styles/templateISS.css">
<link rel="stylesheet" type="text/css" href="../styles/main.css">
<link rel="stylesheet" type="text/css" href="../styles/sidenav.css">
<link rel="stylesheet" type="text/css" href="../styles/topnav.css">
<script type="text/javascript" src="../scripts/myScripts.js"></script>
</head>
<body onload="return loadNav();">
<div id="openButton" class="openButton" onclick="openNav(true)">☰ Menu</div>
<div id="sidenav" class="sidenav">
<a class="closeButton" href="javascript:void(0)" onclick="closeNav(true)">×</a>
<a href="../../index.html">Index</a>
<a href="final_theme.html">Final Theme</a>
<a href="requirement_analysis.html">Requirement<br/>Analysis</a>
<a class="selected" href="problem_analysis.html">Problem Analysis</a>
<a href="conclusions.html">Conclusions</a>
<a href="team.html">Team</a>
</div>
<div id="main">
<h1 align="center">Problem Analysis</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>uj5u.com熱心網友回復：
localStorage 或 sessionStorage 的方法 getItem 應該回傳一個字串而不是布林值。
因此，您可能需要在代碼中執行以下檢查。
sessionStorage.getItem("sideNavOpen") === 'true'
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/508464.html
標籤：javascript 会议 侧边栏