Javascript 页面刷新时丢失数据

我正在努力完成一项看似简单的任务，但它完全让我困惑

当用户单击菜单项时，页面将刷新，用户将进入另一个页面

div将使用更新的文本进行更新

我的问题是，当页面刷新时，我会丢失消息“You's on a new page”，如何将更新的消息保留在新页面上

jquery-

<script>
    $(document).ready(function () {

        $("li.sub-level").click(function (e) {
            $('.mylink').html("You are on a new page");

        });

    });

</script>

$（文档）.ready（函数（）{
$（“li.sub-level”）。单击（函数（e）{
$（'.mylink'）.html（“您已进入新页面”）；
});
});

html-

<div class="mylink">My link</div>

我的链接

您需要首先在infoObj中“保存”您的第一个位置，我建议您使用第一页的url进行保存。 这将防止在第一页时出现字符串“You's on a new page”

$(document).ready(function() {
    var infoObj = {};
    var url = window.location.href;

    if (localStorage.myLink != null) {
      infoObj = JSON.parse(localStorage.myLink)
      if (infoObj.url == url) {
        $('.mylink').html(infoObj.text);
      }
    }

    $("li.sub-level").click(function(e) {
      infoObj = {
        url: "PUT YOU FIRST PAGE URL HERE",
        text: "You are on a new page"
      }
      localStorage.myLink = JSON.stringify(infoObj)
    });
});

---

我想你应该访问这个链接。我希望你能得到你的答案

链接在这里

或使用以下代码。会话存储的工作原理。

<script>
    // Run on page load
    window.onload = function() {

        // If sessionStorage is storing default values (ex. name), exit the function and do not restore data
        if (sessionStorage.getItem('name') == "name") {
            return;
        }

        // If values are not blank, restore them to the fields
        var name = sessionStorage.getItem('name');
        if (name !== null) $('#inputName').val(name);

        var email = sessionStorage.getItem('email');
        if (email !== null) $('#inputEmail').val(email);

        var subject= sessionStorage.getItem('subject');
        if (subject!== null) $('#inputSubject').val(subject);

        var message= sessionStorage.getItem('message');
        if (message!== null) $('#inputMessage').val(message);
    }

    // Before refreshing the page, save the form data to sessionStorage
    window.onbeforeunload = function() {
        sessionStorage.setItem("name", $('#inputName').val());
        sessionStorage.setItem("email", $('#inputEmail').val());
        sessionStorage.setItem("subject", $('#inputSubject').val());
        sessionStorage.setItem("message", $('#inputMessage').val());
    }
</script>

//在页面加载时运行
window.onload=函数（）{
//如果sessionStorage正在存储默认值（例如名称），请退出该函数，不还原数据
if（sessionStorage.getItem（'name'）=“name”）{
返回；
}
//如果值不为空，请将其还原到字段中
var name=sessionStorage.getItem（'name'）；
if（name！==null）$（'#inputName'）.val（name）；
var email=sessionStorage.getItem（'email'）；
if（email！==null）$（'#inputEmail'）.val（email）；
var subject=sessionStorage.getItem（'subject'）；
if（subject！==null）$（'#inputSubject'）.val（subject）；
var message=sessionStorage.getItem（'message'）；
if（message！==null）$（'#inputMessage'）.val（message）；
}
//刷新页面之前，请将表单数据保存到sessionStorage
window.onbeforeunload=函数（）{
setItem（“name”，$（“#inputName”）.val（）；
sessionStorage.setItem（“email”，$（“#inputEmail”）.val（）；
sessionStorage.setItem（“subject”，$（“#inputSubject”）.val（）；
setItem（“message”，$（“#inputMessage”）.val（）；
}

您需要将其保存在本地/会话存储、url或服务器中。是的，我要说的是，本地存储是JavaScript在呈现后操作DOM的最佳选择。这意味着浏览器将始终读取原始HTML文件。您所做的是在呈现页面后操作结构。您需要以某种方式保存更改，例如使用LocalStorages，为什么他应该使用sessionStorage而不是localStorage？

sessionStorage

是短暂的，只要关闭浏览器选项卡，项目就会消失。这使您可以根据用户的浏览会话更灵活地显示给用户的内容。@MD Aman-如果使用

onbeforeuload

事件，您可能会遇到这些类型的操作问题，因为每当浏览器从一页导航到另一页时，它会停止JavaScript执行，因此您的项目可能无法保存。嗨，Zorken，这不起作用，当页面加载时，我看到“您在新页面上”，我只想在单击刷新页面的菜单项时看到这一点。$（“li.sub-level”）查看我的更新代码。你必须以某种方式检查你是否在第一个页面上。我不得不放弃这种方法，取而代之的是，我通过注入一个url来操纵页面，非常感谢所有发表文章的人。