页面刷新后保持动态加载的div内容状态的实现方法

要实现刷新页面后content容器里的内容保持不变，核心思路是记录用户最后一次点击的页面标识，在页面初始化时根据这个标识重新加载对应的内容。我们可以用localStorage来存储这个状态（它会持久保存在浏览器里，除非用户主动清除缓存），如果想让状态在浏览器会话结束后自动消失，也可以换成sessionStorage。

修改后的JavaScript代码 #

$(document).ready(function () {
  // 页面初始化时，读取本地存储的页面标识，自动加载对应内容
  const savedPage = localStorage.getItem('activeContentPage');
  if (savedPage) {
    $("#content").load(`{% url savedPage %}`);
  }

  // 点击"about"链接的逻辑
  $("#2").click(function (e) {
    e.preventDefault(); // 阻止<a>标签的默认跳转行为
    const pageName = 'about';
    $("#content").load(`{% url pageName %}`);
    localStorage.setItem('activeContentPage', pageName); // 保存当前页面标识
  });

  // 点击"pay"链接的逻辑
  $("#3").click(function (e) {
    e.preventDefault();
    const pageName = 'pay';
    $("#content").load(`{% url pageName %}`);
    localStorage.setItem('activeContentPage', pageName);
  });
});

额外优化方案：用URL哈希记录状态 #

如果需要支持通过URL直接分享当前页面状态（比如别人打开yourpage.com#about就能直接看到about的内容），可以用URL哈希来实现，代码如下：

$(document).ready(function () {
  // 初始化时根据URL哈希加载内容
  const hash = window.location.hash.slice(1); // 去掉哈希前的#号
  if (hash === 'about' || hash === 'pay') {
    $("#content").load(`{% url hash %}`);
  }

  $("#2").click(function (e) {
    e.preventDefault();
    window.location.hash = 'about';
    $("#content").load(`{% url 'about' %}`);
  });

  $("#3").click(function (e) {
    e.preventDefault();
    window.location.hash = 'pay';
    $("#content").load(`{% url 'pay' %}`);
  });

  // 监听哈希变化，自动切换内容
  $(window).on('hashchange', function() {
    const hash = window.location.hash.slice(1);
    if (hash === 'about' || hash === 'pay') {
      $("#content").load(`{% url hash %}`);
    }
  });
});

HTML代码小优化（可选） #

原来的HTML可以正常运行，但建议把<a>标签的id改成更语义化的名称，提升代码可读性：

<a id="about-link" href="#">click me </a> 
<a id="pay-link" href="#">pay </a> 
<div id="content"></div> 
<h1>hello</h1> 
{% endblock test %}

这样修改后，用户刷新页面时，content容器会自动加载最后一次点击的页面内容，直到用户点击其他链接切换状态。

内容的提问来源于stack exchange，提问作者Shubham Singh