I’ve got a local document (it’s for a project and doesn’t run on a Web Server) with some pages. Each pages is equipped with a sidebar which can be open or closed. Since you can change page from the sidebar links, I used sessionStorage to save its current state (open/closed), but when I refresh the page it keeps resetting to true.
I’ve got a loadNav() function associated to body’s onload property, which initializes the state of the sidebar (by checking the sessionStorage parameter). However, if I inspect the page with DevTools (F12), I see that value is resetting each time I refresh the page. From what I know it shouldn’t happen, and I don’t know how to fix it neither can’t find a workaround. I’ve even tried with localSession, but it does the same.
Here’s the code of one of those pages as a reference (only the content of "main" <div> changes from one to the other). It’s just as a reference, since the storageSession doesn’t work in 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>>Solution :
The method getItem of localStorage or sessionStorage should return a string instead of boolean.
Thus, you may need to do the following checking in your code.
sessionStorage.getItem("sideNavOpen") === 'true'