如何解决如何保持活动onclick页面刷新
$(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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。