I have a local document for a project that doesn't run on a web server. It contains multiple pages, each with a sidebar that can be toggled open or closed. I have implemented sessionStorage to save the current state of the sidebar (open or closed), but I am facing an issue where the state resets to true upon refreshing the page.
The loadNav() function is linked to the body's onload property, which is responsible for initializing the sidebar state by checking the sessionStorage parameter. However, when inspecting the page using DevTools (F12), I notice that the value resets with each page refresh. This behavior is unexpected, and I am struggling to find a solution or workaround. I have even attempted using localSession, but encountered the same issue.
Referencing one of the pages' code snippet (only the content within the "main"
https://i.sstatic.net/UnWiy.png
/* 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;
}
/* Additional CSS styles omitted for brevity */
<!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>