当返回到上一页时，Javascript没有执行，在githubpage、edge和chrome上本地和实时的行为不同

Question

请查看我试图重新创建问题的GithubPage。

当你点击第一个按钮时，它会创建一个段落，将其附加到本地存储项并显示

当您单击第二个按钮时，它将首先清除本地存储，然后重定向到另一个页面。

现在，如果您从第2页单击浏览器返回按钮，您将返回到index.html，但段落仍然存在。如果检查localstorage，段落会被删除，但它们仍然显示，就好像js脚本在返回index.html时没有执行一样。

我对chrome和Firefox有这个问题，但edge的行为正如我所期望的那样(回到index.html，没有显示任何段落(。当我在本地实时服务器上测试它时，一切都如预期的那样工作，即使使用chrome。但不是在GitHub页面上当通过浏览器的后退按钮访问页面时，Js脚本是否会再次运行我想是的，但有人能解释一下这里发生了什么吗？谢谢

这是的脚本

const addPEle = document.querySelector(".addP");
const clearPEle = document.querySelector(".clearP");
const contentEle = document.querySelector(".content");
addPEle.addEventListener("click", () => {
const curContent = localStorage.getItem("content") || "";
localStorage.setItem("content", `${curContent}<p>This is a paragraph.</p>`);
displayContent();
});
clearPEle.addEventListener("click", () => {
localStorage.setItem("content", "");
location.href = "page2.html";
// displayContent();
});
function displayContent() {
contentEle.innerHTML = "";
const content = localStorage.getItem("content") || "There is no paragraph.";
contentEle.innerHTML = content;
console.log("from displayContent function");
console.log(`content: ${content}`);
console.log(`localStorage: ${localStorage.getItem("content")}`);
}
displayContent();

Answer 1

这是因为后退缓存保留了您的页面及其状态，并且在返回时不会刷新您的页面。

您可以使用PageLifeCycle事件来检查您的页面是否向后导航，并根据需要进行重新加载。请参阅演示https://page-lifecycle.glitch.me/从…起https://github.com/GoogleChromeLabs/page-lifecycle

window.addEventListener('pageshow', (event) => {
if (event.persisted) {
// page was restored from the bfcach
// Do your reload or re-render page with data
}
});