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

Question

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

如何防止所需页面刷新到默认页面？

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>

HTML：

<nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="" id="show_one"> One</a></li>
                <li><a href="" id="show_two"> Two</a></li>
                <li><a href="" id="show_three"> Three</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <a data-toggle="modal" data-target="#myModal"> Modal Dialog</a>
            </ul>
        </div>
        </div>
    </nav>


<div class="container">
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-body">
                                <form class="form-horizontal">
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="button" id="show_one1" class="btn btn-info" data-dismiss="modal" aria-hidden="true">One</button>
                                            <button type="button" id="show_two2" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Two</button>
                                            <button type="button" id="show_three3" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Three</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
</div>

<div class="container">
        <div class="one">
            <div class="row">
                <center>
                    Page 1
                </center>
             </div>
        </div>
        <div class="two">
            <div class="row">
                <center>
                    Page 2
                </center>
             </div>
        </div>
        <div class="three">
            <div class="row">
                <center>
                    Page 3
                </center>
             </div>
        </div>
</div>

Answer 1

当您使用 javascript 更改 DOM 的状态时，它将在页面重新加载时重置为实际状态。如果您希望能够存储此状态并在重新加载时以相同状态呈现 DOM，则必须使用 localStorage 或 sessionStorage。在这种情况下，我将使用 sessionStorage 向您展示如何做到这一点。您可以在此处了解不同之处 - http://www.w3schools.com/html/html5_webstorage.asp

工作示例

这里有一个完整的工作示例，说明如何实现这一点 - http://codepen.io/nitishdhar/pen/DGHkw

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

详细说明

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

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

对于链接

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

请注意我添加的类和数据页属性。我也给了href一个#，这样你就不必在点击事件时返回false。您也可以使用 javascript:void(0);而不是 # 如果你不想更新你的窗口哈希。

也适用于按钮

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

我还添加了一个 modal-btn 类，仅用于在模式内呈现的按钮。这是只为模式中的按钮处理模式隐藏事件。不需要将 modal('hide') 附加到其他链接。

现在在你的 javascript 中让它工作，你会做这样的事情 -

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

所以我们试图绑定每个具有类 show-page 的元素的点击事件。然后在单击时，我们会读取特定单击元素的 data-page 属性中的内容。然后我们隐藏所有页面并仅显示其持有者被点击的页面。这样您就不必为所有按钮编写单独的事件处理程序。

我也在单独处理模态的隐藏。

使用会话存储

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

我们将维护一个变量来保存用户之前所在的最后一页，就像这样 -

/* 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);
}

现在，当用户尝试移动到页面时，在点击事件上，我们将不断更新会话变量“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。

Answer 2

将所有内容都设置为<a href="javascript:void(0)">，你就是金子了。