javascript - How to keep the menu state on page reload -

i have following code snippet , wanted know if there possibility update achieving menu behaviour:

step 1. on mouse hover link 1 ----> translated 1.5em right (already set);

step 2. on link 1 click ----> menu button remain fixed in place @ translated position (done, special @guest271314) on page reload too, until new menu button clicked (not set yet) and page loaded.

note: next/prev buttons code section, remain unchanged (or can edited if it's must, in order remain functional).

note2: have mention in end, solution implemented in wordpress not static html sitepage.

$(function () {      $('nav ul li').click(function (e) {          //set aesthetics (similar :hover)          $('nav ul li')          .not(".clicked").removeclass('hovered')          .filter(this).addclass("clicked hovered")          .siblings().toggleclass("clicked hovered", false);      }).hover(function () {          $(this).addclass("hovered")      }, function () {          $(this).not(".clicked").removeclass("hovered")      });        var pagesize = 4,          $links = $(".pagedmenu li"),          count = $links.length,          numpages = math.ceil(count / pagesize),          curpage = 1;        showpage(curpage);        function showpage(whichpage) {          var previouslinks = (whichpage - 1) * pagesize,              nextlinks = (previouslinks + pagesize);          $links.show();          $links.slice(0, previouslinks).hide();          $links.slice(nextlinks).hide();          showprevnext();      }        function showprevnext() {          if ((numpages > 0) && (curpage < numpages)) {              $("#nextpage").removeclass('hidden');              $("#msg").text("(" + curpage + " of " + numpages + ")");          } else {              $("#nextpage").addclass('hidden');          }          if ((numpages > 0) && (curpage > 1)) {              $("#prevpage").removeclass('hidden');              $("#msg").text("(" + curpage + " of " + numpages + ")");          } else {              $("#prevpage").addclass('hidden');          }      }        $("#nextpage").on("click", function () {          showpage(++curpage);      });      $("#prevpage").on("click", function () {          showpage(--curpage);      });    });

.hidden {      display: none;  }    body {      font: normal 1.0em arial, sans-serif;      }      nav.pagedmenu {      color: red;      font-size: 2.0em;      line-height: 1.0em;      width: 8em;      position: fixed;       top: 50px;  }    nav.pagedmenu ul {        list-style: none;      margin: 0;      padding: 0;  }    nav.pagedmenu ul li {      height: 1.0em;      padding: 0.15em;      position: relative;      border-top-right-radius: 0em;      border-bottom-right-radius: 0em;      -webkit-transition:       -webkit-transform 220ms, background-color 200ms, color 500ms;      transition: transform 220ms, background-color 200ms, color 500ms;  }      nav.pagedmenu ul li.hovered {      -webkit-transform: translatex(1.5em);      transform: translatex(1.5em);  }  nav ul li:hover {      transition: color, 1200ms;      color: red;  }  nav.pagedmenu ul li span {      display:block;      font-family: arial;      position: absolute;      font-size:1em;      line-height: 1.25em;      height:1.0em;      top:0; bottom:0;      margin:auto;      right: 0.01em;      color: #f8f6ff;    }    {      color: gold;      transition: color, 1200ms;      text-decoration: none;  }    #pagination, #prevpage, #nextpage {      font-size: 1.0em;      color: gold;          line-height: 1.0em;      padding-top: 250px;      padding-left: 5px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <nav class="pagedmenu">     <ul style="font-size: 28px;">      	<li class="" style="margin-bottom: 5px;"><a href="#">link 1</a></li>      	<li class="" style="margin-bottom: 5px;"><a href="#">link 2</a></li>      	<li class="" style="margin-bottom: 5px;"><a href="#">link 3</a></li>      	<li class="" style="margin-bottom: 5px;"><a href="#">link 4</a></li>      	<li class="" style="margin-bottom: 5px;"><a href="#">link 5</a></li>      	<li class="" style="margin-bottom: 5px;"><a href="#">link 6</a></li>      	<li class="" style="margin-bottom: 5px;"><a href="#">link 7</a></li>      	<li class="" style="margin-bottom: 5px;"><a href="#">link 8</a></li>      	<li class="" style="margin-bottom: 5px;"><a href="#">link 9</a></li>      	<li class="" style="margin-bottom: 5px;"><a href="#">link 10</a></li>      	<li class="" style="margin-bottom: 5px;"><a href="#">link 11</a></li>      	<li class="" style="margin-bottom: 5px;"><a href="#">link 12</a></li>    </ul>  </nav>    <div id="pagination">      <a href="#" id="prevpage" class="hidden">previous</a>&nbsp;&nbsp;      <a href="#" id="nextpage" class="hidden">next</a>      <span id="msg"></span>  </div>

le: regarding @lars comment:

this state applied per all users (i think?, it's best option long menu displayed on every pages, unconditioned browser type or session);

also regarding storage location, it's not problem saving state locally, server side, great if have pro/cons make right decision;

in end, if helps, in order see whole picture, can use live link as example; there similar menu above described , regarding state, if there model implemented here, i'll glad find it.

you can save menu (and page) status in localstorage variable. on page load check if variable exists , set correct link/page status.

https://github.com/julien-maurel/jquery-storage-api