刷新后在DOM上保留JS更改

Keeping JS changes on DOM after refresh

本文关键字：保留 JS 更改 DOM 刷新      更新时间：2023-09-26

所以，我的测试站点中发生了一件奇怪的事情，在那里我有每个"链接"（无论是菜单、按钮还是任何东西）来显示/隐藏div，而不是加载页面。相当基本的权利？除了每当我刷新页面时，它都会返回到主页，这是意料之中的。根据我对答案的搜索，我认为我必须使用本地/会话存储选项。会话听起来更好。

所以交易是这样的。我在sessionStorage上查找了w3schools页面，了解了它的工作原理，但我并不知道如何将其应用于我的页面。基本上，我页面上的每个链接都运行一个函数，该函数隐藏前一个div，并显示一个包含内容的新div。所以我在想，如果每次触发函数时，它都会在var上存储一个值，该值会指定该函数为最后一个使用的函数。然后以某种方式使用sessionStorage并使其工作，但我无法构建它。有什么帮助吗？

下面是我当前代码的一个简短示例。

编辑

var state = null;
function show1() {
    state = "home";
    "use strict";
    document.getElementById('snow').style.display = "block";
    document.getElementById('btn').style.display = "none";
}

function ramble() {
    state = "ramble";
    "use strict";
    document.getElementById('ramble').style.display = "block";
    document.getElementById('snow').style.display = "none";
    document.getElementById('tex').style.display = "none";
}

基本上就是这样。点击显示/隐藏。

您可以使用以下语法：

保存数据：

sessionStorage.setItem('key', 'value');

检索数据：

var data = sessionStorage.getItem('key');

更多信息和示例：https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

localStorage也是如此，但由于持久性差异，您已经发现

我希望我的解决方案能帮助你：如果你想保留你的JS更改，你需要使用AJAX将它们保存到数据库，还需要更改页面架构和逻辑以使用数据库中的数据。之后，即使重新加载页面，您也会保留所有更改。

相关文章：