如何保持活动onclick页面刷新

编程问答 2022-08-11

问题描述

  $(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填充将保持不变。

解决方法

您可以使用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);

htmljavascriptjqueryjquery-pluginsjquery-ui