持久性HTML / Javascript菜单的本地存储或会话存储

Question

In the past I'vee always maintained a menu for each PHP page allowing me to set the active (selected) item in the list. I think it makes more sense to call include the menu just once maybe in my header script and then set/retrieve the state for each page via javascript.

Using local storage would seem to meet this requirement. Is it better to use local storage or session storage for this? It seems as though using local storage would be better for performance.

Does anyone have any experience with this or have any recommendations/suggestions?

My current HTML looks like this:

<ul class="nav nav-list">
  <li class='nav-header'>Menu</li>
  <li class="active" id="page-1"><a href="page1.php">Page 1</a></li>
  <li><a href="page2.php" id="page-2">Page 2</a></li>
  <li><a href="page3.php" id="page-3">Page 3</a></li>
</ul>

Can I use the ID and set it in local storage and check it for each page load?

Answer 1

There's no performance difference between session and local storage. The difference is in the persistence. Session storage is deleted as soon as the user closes the browser window. Local storage is maintained across multiple visits to the web page.