如何在页面刷新时保持javascript/jquery对DOM所做的更改

我的问题是，当我点击一个链接（例如第二页）时，它会在屏幕上显示第二页。但是当我重新加载页面时，当前页面不会被保存，它会恢复为默认页面

如何使所需页面不刷新为默认页面

JavaScript:

<script type="text/javascript"> 
    $(function(){
        $('.one').show();
        $('.two').hide();
        $('.three').hide();
        $('#show_one, #show_one1').click(function(){
            $('.one').show();
            $('.two').hide();
            $('.three').hide();
            $('.modal').modal('hide');
            return false;
        });
        $('#show_two, #show_two2').click(function(){
            $('.one').hide();
            $('.two').show();
            $('.three').hide();
            $('.modal').modal('hide');
            return false;
        });
        $('#show_three, #show_three3').click(function(){
            $('.one').hide();
            $('.two').hide();
            $('.three').show();
            $('.modal').modal('hide');
            return false;
        });
    });
</script>

$（函数（）{
$（'.one'）.show（）；
$（'.two'）.hide（）；
$（'.three'）.hide（）；
$（'#show_one，#show_one 1'）。单击（函数（）{
$（'.one'）.show（）；
$（'.two'）.hide（）；
$（'.three'）.hide（）；
$（'.modal'）.modal（'hide'）；
返回false；
});
$（'#show_two，#show_two 2'）。单击（函数（）{
$（'.one'）.hide（）；
$（'.two'）.show（）；
$（'.three'）.hide（）；
$（'.modal'）.modal（'hide'）；
返回false；
});
$（'#show#three，#show#three3'）。单击（函数（）{
$（'.one'）.hide（）；
$（'.two'）.hide（）；
$（'.three'）.show（）；
$（'.modal'）.modal（'hide'）；
返回false；
});
});

HTML:

模态对话框

一个
两个
三
第1页
第2页
第3页

将所有内容设置为

，您就是黄金。

当您使用javascript更改DOM的状态时，它将重置为页面重新加载时的实际状态。如果希望能够存储此状态并在重新加载时以相同的状态显示DOM，则必须使用本地存储或会话存储。在这种情况下，我将使用sessionStorage向您展示如何实现这一点。你可以在这里看到不同之处-

工作示例

如何实现这一目标的完整工作示例如下：

您可以切换到某个页面，然后刷新浏览器窗口，它将仅停留在该页面上

详细说明

<button type="button" class="btn btn-info show-page modal-btn" data-page="one" data-dismiss="modal" aria-hidden="true">One</button>
<button type="button" class="btn btn-info show-page modal-btn" data-page="two" data-dismiss="modal" aria-hidden="true">Two</button>
<button type="button" class="btn btn-info show-page modal-btn" data-page="three" data-dismiss="modal" aria-hidden="true">Three</button>

首先，你处理节目的方式可以这样改进-

$('.show-page').click(function(){
   /* Get the Page to Show */
   var pageToShow = $(this).data('page');
   /* Hide all pages first */
    $('.page').addClass('hide');
   /* Show the page whose link was clicked */
    $('.' + pageToShow).removeClass('hide');
 });

$('.modal-btn').click(function() {
    $('.modal').modal('hide');
});

/* Check if session has some page to show stored */
if(typeof(Storage)!== "undefined" && sessionStorage.getItem('pageToShow')) {
    var pageToShow = sessionStorage.getItem('pageToShow');
    /* Hide all pages first */
     $('.page').addClass('hide');
    /* Show the page whose link was clicked */
     $('.' + pageToShow).removeClass('hide');
    /* Also set this page to session storage */
     sessionStorage.setItem('pageToShow', pageToShow);
}

$('.show-page').click(function(){
    /* Get the Page to Show */
    var pageToShow = $(this).data('page');
    /* Hide all pages first */
     $('.page').addClass('hide');
    /* Show the page whose link was clicked */
     $('.' + pageToShow).removeClass('hide');
     if(typeof(Storage)!=="undefined") {
        sessionStorage.setItem('pageToShow', pageToShow);
    }
});

您只需向所有链接/按钮添加一个公共类，您希望页面更改事件从这些链接/按钮触发并在其中存储一个数据属性，定义单击时应打开的页面，如下所示-

$('.show-page').click(function(){
   /* Get the Page to Show */
   var pageToShow = $(this).data('page');
   /* Hide all pages first */
    $('.page').addClass('hide');
   /* Show the page whose link was clicked */
    $('.' + pageToShow).removeClass('hide');
 });

$('.modal-btn').click(function() {
    $('.modal').modal('hide');
});

/* Check if session has some page to show stored */
if(typeof(Storage)!== "undefined" && sessionStorage.getItem('pageToShow')) {
    var pageToShow = sessionStorage.getItem('pageToShow');
    /* Hide all pages first */
     $('.page').addClass('hide');
    /* Show the page whose link was clicked */
     $('.' + pageToShow).removeClass('hide');
    /* Also set this page to session storage */
     sessionStorage.setItem('pageToShow', pageToShow);
}

$('.show-page').click(function(){
    /* Get the Page to Show */
    var pageToShow = $(this).data('page');
    /* Hide all pages first */
     $('.page').addClass('hide');
    /* Show the page whose link was clicked */
     $('.' + pageToShow).removeClass('hide');
     if(typeof(Storage)!=="undefined") {
        sessionStorage.setItem('pageToShow', pageToShow);
    }
});

用于链接

<li><a href="#" class="show-page" data-page="one"> One</a></li>
<li><a href="#" class="show-page" data-page="two"> Two</a></li>
<li><a href="#" class="show-page" data-page="three"> Three</a></li>

因此，我们试图绑定每个元素的click事件，这些元素都有类show page。然后单击，我们读取特定单击元素的数据页属性中的内容。然后我们隐藏所有页面&只显示其持有者被单击的页面。这样，您就不必为所有按钮编写单独的事件处理程序

我也分别处理模态的隐藏

使用会话存储

现在，会话存储是浏览器存储，它将为您保存当前会话的一些数据，即直到用户关闭浏览器窗口为止

我们将维护一个变量，该变量将保存用户之前所在的最后一页，类似这样的内容-

$('.show-page').click(function(){
   /* Get the Page to Show */
   var pageToShow = $(this).data('page');
   /* Hide all pages first */
    $('.page').addClass('hide');
   /* Show the page whose link was clicked */
    $('.' + pageToShow).removeClass('hide');
 });

$('.modal-btn').click(function() {
    $('.modal').modal('hide');
});

/* Check if session has some page to show stored */
if(typeof(Storage)!== "undefined" && sessionStorage.getItem('pageToShow')) {
    var pageToShow = sessionStorage.getItem('pageToShow');
    /* Hide all pages first */
     $('.page').addClass('hide');
    /* Show the page whose link was clicked */
     $('.' + pageToShow).removeClass('hide');
    /* Also set this page to session storage */
     sessionStorage.setItem('pageToShow', pageToShow);
}

$('.show-page').click(function(){
    /* Get the Page to Show */
    var pageToShow = $(this).data('page');
    /* Hide all pages first */
     $('.page').addClass('hide');
    /* Show the page whose link was clicked */
     $('.' + pageToShow).removeClass('hide');
     if(typeof(Storage)!=="undefined") {
        sessionStorage.setItem('pageToShow', pageToShow);
    }
});

现在，当用户尝试移动到某个页面时，单击事件，我们将不断更新会话变量“pageToShow”，如下所示-

$('.show-page').click(function(){
   /* Get the Page to Show */
   var pageToShow = $(this).data('page');
   /* Hide all pages first */
    $('.page').addClass('hide');
   /* Show the page whose link was clicked */
    $('.' + pageToShow).removeClass('hide');
 });

$('.modal-btn').click(function() {
    $('.modal').modal('hide');
});

/* Check if session has some page to show stored */
if(typeof(Storage)!== "undefined" && sessionStorage.getItem('pageToShow')) {
    var pageToShow = sessionStorage.getItem('pageToShow');
    /* Hide all pages first */
     $('.page').addClass('hide');
    /* Show the page whose link was clicked */
     $('.' + pageToShow).removeClass('hide');
    /* Also set this page to session storage */
     sessionStorage.setItem('pageToShow', pageToShow);
}

$('.show-page').click(function(){
    /* Get the Page to Show */
    var pageToShow = $(this).data('page');
    /* Hide all pages first */
     $('.page').addClass('hide');
    /* Show the page whose link was clicked */
     $('.' + pageToShow).removeClass('hide');
     if(typeof(Storage)!=="undefined") {
        sessionStorage.setItem('pageToShow', pageToShow);
    }
});

现在，如果用户也刷新页面，我们将首先检查会话中是否设置了pageToShow&如果设置了，我们将移动到该页面，就像您希望的那样

---

注意：如果希望pageToShow变量在用户稍后关闭和重新打开浏览器后仍保持不变，则可以使用localStorage而不是sesstionStorage。

不要忘记对您接受的答案进行投票。谢天谢地，他们不知道那里的情况有那么糟糕。将避免以学校为参考。thanks@Nitish如果我得到了15个声誉，我会很快找到你的答案…我的代码有问题…我使用animate.css，我会在页面中的每个表单中添加动画图像。问题是，当我单击链接切换一个表单时，图像动画（两次）应该是一次。@user3671584我在不同的页面中添加了动画和一些图像，其工作正常-。您是使用jQuery在图像中使用动画，还是仅仅通过添加类来使用动画。我通过在具有图像的div中添加所需的类来实现相同的功能。@Nitish Dhar我解决了它，但忘了添加链接