使用本地存儲來存儲顯示偏好

Question

目前，我正躲在使用javascript側邊欄（當我點擊一個按鈕，菜單皮，再次單擊它，它似乎回）

我做了一些研究，localStorage的並沒有什麼盛行。我想知道是否可以使用此方法設置簡單的用戶首選項。所有JS所做的是更改元素的顯示屬性。對不起的代碼是在同一節（大破指示HTML之後）

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 
} 





<div class="col-sm-2"> 
     <i id="collapse" class="fa fa-bars fa-lg" onclick="toggle_visibility('communitiesWrapper');" style="position:absolute;"></i> 
      <div id="communitiesWrapper"> 
       <div id="communitiesHeader"> 
       <center><h4 style="font-weight: 700;">Communities &amp; Teams</h4></center> 
       </div> 
       <div id="communitiesMenu"> 
       <ul class="listofcommunities"> 
        <li><i class="fa fa-code" aria-hidden="true"></i>PCMasterRace</li> 
        <li><i class="fa fa-code" aria-hidden="true"></i>Steam</li> 
        <li><i class="fa fa-code" aria-hidden="true"></i>Corsair</li> 
        <li><i class="fa fa-code" aria-hidden="true"></i>Web development</li> 
        <li><i class="fa fa-code" aria-hidden="true"></i>Font Awesome</li> 
       </ul> 
       <hr> 
       <ul class="listofteams"> 
        <li><i class="fa fa-code" aria-hidden="true"></i>Project A</li> 
        <li><i class="fa fa-code" aria-hidden="true"></i>Project B</li> 
        <li><i class="fa fa-code" aria-hidden="true"></i></i>Project C</li> 
        <li><i class="fa fa-code" aria-hidden="true"></i></i>Project A</li> 
        <li><i class="fa fa-code" aria-hidden="true"></i></i>Project B</li> 
        <li><i class="fa fa-code" aria-hidden="true"></i></i>Project C</li> 
        <li><i class="fa fa-code" aria-hidden="true"></i></i>Project A</li> 
        <li><i class="fa fa-code" aria-hidden="true"></i></i>Project B</li> 
        <li><i class="fa fa-code" aria-hidden="true"></i></i>Project C</li> 
        <li><i class="fa fa-code" aria-hidden="true"></i></i>Project A</li> 
       </ul> 
       </div> 
      </div> 
     </div> 

乾杯，

Answer 1

是的，你可以使用localStorage.setItem和localStorage.getItem方法。您必須將功能綁定到側邊欄（onClick）以存儲用戶的偏好。如果所使用的隱藏側欄，功能應該做的：

localStorage.setItem("showSideBar", "no"); 

並將其設置爲是如果對面。

然後每當加載頁面，檢查這個值來決定是否顯示側欄或不：

var show = localStorage.getItem("showSideBar"); 

if show == "yes": 
    #show the side bar 
else: 
    #hide the side bar