如何在页面刷新时保持活跃的onclick [关闭]答案

【问题标题】：how to keep active onclick on page refresh [closed]如何在页面刷新时保持活跃的onclick [关闭]
【发布时间】：2020-12-27 14:48:41
【问题描述】：

  $(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 %}

我正在尝试存档，如果我重新加载页面，则在 div 中调用的 html 填充保持不变，直到我单击另一个页面链接。

【问题讨论】：

最好的办法是使用一些 cookie 或其他东西来存储点击的链接
你能给我一些例子或链接吗？
您也可以使用window.history.pushState（以便更新网址）popstate 来重新设置页面刷新时的活动链接。
这能回答你的问题吗？ How do I modify the URL without reloading the page?

标签： javascript html jquery jquery-ui jquery-plugins

【解决方案1】：

您可以使用localStorage (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 在页面重新加载之间保持有限状态。请记住，localStorage 将保持相同的值，即使您从具有相同网站/域的同一浏览器的另一个选项卡访问它也是如此。即使在浏览器重新启动之间它也会持续存在。

这是一个简单的测试：

<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>

如果你想让它在同一个浏览器中处理多个用户会话，你可以在本地存储 id 上附加一些唯一的用户标识符，例如localStorage.getItem("content" + currentUser.id);

【讨论】：