[英]sessionStorage and localStorage appearently resets when I refresh the page
我有一個帶有一些頁面的本地文檔（它用於一個項目，並且不在 Web 服務器上運行）。 每個頁面都配有一個可以打開或關閉的側邊欄。 由於您可以從側邊欄鏈接更改頁面，因此我使用sessionStorage來保存其當前的 state （打開/關閉），但是當我刷新頁面時，它會一直重置為 true 。
我有一個loadNav() function 關聯到 body 的 onload 屬性，它初始化側邊欄的 state （通過檢查 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>
localStorage 或 sessionStorage 的方法 getItem 應該返回一個字符串而不是 boolean。
因此，您可能需要在代碼中執行以下檢查。
sessionStorage.getItem("sideNavOpen") === 'true'
當 ComponentDidMount 在刷新時重置值時，如何保留 localstorage？
[英]How can I persist localstorage when ComponentDidMount resets the value on refresh?
如何在導航到另一個頁面但不刷新時清除sessionStorage？
[英]How to clear sessionStorage when navigating to another page but not on refresh?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.