当您使用 JavaScript 更改 DOM 的状态时，它将在页面重新加载时重置为实际状态。如果你希望能够存储这个状态并在重新加载时以相同的状态呈现 DOM，你将不得不使用本地存储或会话存储。在本例中，我将使用 sessionStorage 向您展示如何完成此操作。您可以在这里了解差异 -http://www.w3schools.com/html/html5_webstorage.asp http://www.w3schools.com/html/html5_webstorage.asp
工作示例
如何实现这一点的完整工作示例在这里 -http://codepen.io/nitishdhar/pen/DGHkw 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 的每个元素的单击事件。然后，单击时我们读取该特定单击元素的数据页属性中的内容。然后我们隐藏所有页面并仅显示其持有人被单击的页面。这样您就不必为所有按钮编写单独的事件处理程序。
我还单独处理模态的隐藏。
使用会话存储
现在，会话存储是浏览器存储，它将为您保存当前会话的一些数据，即直到用户关闭浏览器窗口。
我们将维护一个变量来保存用户之前访问的最后一个页面，如下所示 -
/* 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 而不是 sessionStorage。
