页面刷新时丢失数据

Question

我正在努力实现看似简单的任务，但它完全让我感到困惑。

当用户单击菜单项时，页面会刷新，用户最终会转到另一个页面。

使用更新的文本更新 div。

我遇到的问题是，当页面刷新时，我会丢失“您在新页面上”的消息，如何在新页面上保留更新的消息？

jQuery -

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

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

        });

    });

</script>

html -

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

Answer 1

您需要先在 infoObj 中“保存”您的第一个位置，我建议您使用第一页的 url 进行。 当您在第一页时，这将阻止字符串“您在新页面上”。

$(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)
    });
});

Answer 2

我认为您应该访问此链接。 我希望你能得到你的答案。

链接在这里演示链接

或者使用下面的代码。 sessionStorage 是如何工作的。

<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>