My problem is when I click a link (example Second Page) it will display a second page on screen. But when I reload the page, the current page is not saved and it revert to the default page.
How do I keep the desired page from refreshing to the default page?
When you change the state of your DOM using javascript, it will reset to the actual state on page reload. If you want to be able to store this state & present the DOM in the same state on reload, you will have to use either localStorage or sessionStorage. In this case I will use sessionStorage to show you how this can be done. You can read about the difference here - http://www.w3schools.com/html/html5_webstorage.asp
You can switch to some page & then refresh your browser window & it will stay on that page only.
Detailed Explanation
First of all the way you are handling the show can be improved like this -
You can just add one common class to all the links/buttons from which you want the page change event to trigger & store a data attribute in them defining which page they should open if clicked, something like this -
Notice the class & data-page attribute I added. Also I gave a # to the href, this way you won't have to return false on click event. You may also use javascript:void(0); instead of # if you don't want your window hash to get updated.
I have also added a modal-btn class only to the buttons that render inside the modal. This is to handle the modal hide event only for the buttons that are in the modal. It is unnecessary to attach modal('hide') to the other links.
Now in your javascript to make it work, you will do something like this -
$('.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');
});
So we are trying to bind the click event of every element that has class show-page. Then on click we read what's in that specific clicked element's data-page attribute. Then we hide all pages & show only the one whose holder was clicked. This way you don't have to write separate event handlers for all buttons.
I am also handling hiding of modal separately.
Using Session Storage
Now session storage is browser storage that will hold some data for you for the current session i.e until user closes the browser window.
We will maintain a variable that will hold the last page user was at before, something like this -
/* 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);
}
Now on click events when user tries to move to a page, we will keep updating the session variable 'pageToShow', something like this -
$('.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);
}
});
Now if user refreshes the page also, we will first check if we have a pageToShow set in session & if we do, we will move to that page, just like you wanted.
Note: You can use localStorage instead of sesstionStorage if you want the pageToShow variable to stay even after user closes & reopens the browser later.
这篇关于如何在页面刷新时保留 javascript/jquery 对 DOM 所做的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
