how to keep active onclick on page refresh

Question

  $(document).ready(function () {
      $("#2").click(function () {
         $("#content").load("{% url 'about' %}");
       });

    $("#3").click(function () {
      $("#content").load("{% url 'pay' %}");
    });

 });

========== html ===========

<a id="2" href="#">click me </a>
<a id="3" href="#">pay </a>

<div id="content"></div>

<h1>hello</h1>

{% endblock test %}

I am trying to archive that if i reload the page the html fill that called in div remain the same until i click another page link.

Best bet would be to use some cookie or something to store what link was clicked — Carsten Løvbo Andersen, Sep 09 '20 at 07:53
You could also use `window.history.pushState` (so that it updates the url) the popstate to to re-set the active link on page refresh. — freedomn-m, Sep 09 '20 at 08:22
Does this answer your question? [How do I modify the URL without reloading the page?](https://stackoverflow.com/questions/824349/how-do-i-modify-the-url-without-reloading-the-page) — freedomn-m, Sep 09 '20 at 08:22

score 1 · Answer 1 · answered Sep 09 '20 at 08:14

You could use localStorage (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to keep limited state between page reloads. Keep in mind that localStorage will hold the same values even if you access it from another tab of the same browser with the same web site/domain. It will persist even between browser restarts.

Here is a simple test:

<html>
<head>
    <script>
    function documentLoaded()
    {
        var contentDiv = document.getElementById("content");
        function refresh()
        {
            contentDiv.innerHTML = localStorage.getItem("content");
        }

        var link1 = document.getElementById("link1");
        var link2 = document.getElementById("link2");
        var link3 = document.getElementById("link3");
        
        link1.onclick = function(){localStorage.setItem("content", "div text 1"); refresh();}
        link2.onclick = function(){localStorage.setItem("content", "div text 2"); refresh();}
        link3.onclick = function(){localStorage.setItem("content", "div text 3"); refresh();}

        refresh();
    }
    </script>
</head>
<body onload="javascript:documentLoaded()">
    <a id="link1" href="javascript:void(0)">link 1</a><br />
    <a id="link2" href="javascript:void(0)">link 2</a><br />
    <a id="link3" href="javascript:void(0)">link 3</a><br />
    
    <div id="content">default div text</div>
</body>
</html>

If you want to make it work with multiple user sessions in the same browser, you could append some unique user identifier to the local storage id, e.g. localStorage.getItem("content" + currentUser.id);

how to keep active onclick on page refresh

1 Answers1