刷新后页面加载回索引页面

Question

I have created a website with multiple pages and pagination but when I am on page2 and refresh, It goes back to the index.php page. Is there something to do with session storage or cookies in this case. Any solution so that it will stay on the same page even after refreshing it.

Edit:

so this is the pagination script and all other content is also in the same page

 <script type="text/javascript">
$(document).ready(function(){

    var show_per_page = 9; 

    var number_of_items = $('#content').children().size();

    var number_of_pages = Math.ceil(number_of_items/show_per_page);


    $('#current_page').val(0);
    $('#show_per_page').val(show_per_page);


    var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';
    var current_link = 0;
    while(number_of_pages > current_link){
        navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
        current_link++;
    }
    navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';

    $('#page_navigation').html(navigation_html);


    $('#page_navigation .index.php:first').addClass('active_page');


    $('#content').children().css('display', 'none');


    $('#content').children().slice(0, show_per_page).css('display', 'block');

});

function previous(){

    new_page = parseInt($('#current_page').val()) - 1;

    if($('.active_page').prev('.page_link').length==true){
        go_to_page(new_page);
    }

}

function next(){
    new_page = parseInt($('#current_page').val()) + 1;
    if($('.active_page').next('.page_link').length==true){
        go_to_page(new_page);
    }

}
function go_to_page(page_num){
    var show_per_page = parseInt($('#show_per_page').val());

    start_from = page_num * show_per_page;

    end_on = start_from + show_per_page;

    $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

    $('.page_link[longdesc=' + page_num +']').addClass('index.php').siblings('.page2.php').removeClass('active_page');
        $('#current_page').val(page_num);
}
  </script>

Answer 1

Whenever any page is changed, you can add new page link in local storage.

window.localStorage.setItem('page', 'home.php');

When you refresh page, you need to check if there is any value for page in local storage.

var startPage = window.localStorage.getItem('page');

if (startPage) {
    window.location.replace(startPage);
}

Answer 2

so this is the pagination script  and all other content is also in the same page 

 <script type="text/javascript">
$(document).ready(function(){

    var show_per_page = 9; 

    var number_of_items = $('#content').children().size();

    var number_of_pages = Math.ceil(number_of_items/show_per_page);


    $('#current_page').val(0);
    $('#show_per_page').val(show_per_page);


    var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';
    var current_link = 0;
    while(number_of_pages > current_link){
        navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
        current_link++;
    }
    navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';

    $('#page_navigation').html(navigation_html);


    $('#page_navigation .index.php:first').addClass('active_page');


    $('#content').children().css('display', 'none');


    $('#content').children().slice(0, show_per_page).css('display', 'block');

});

function previous(){

    new_page = parseInt($('#current_page').val()) - 1;

    if($('.active_page').prev('.page_link').length==true){
        go_to_page(new_page);
    }

}

function next(){
    new_page = parseInt($('#current_page').val()) + 1;
    if($('.active_page').next('.page_link').length==true){
        go_to_page(new_page);
    }

}
function go_to_page(page_num){
    var show_per_page = parseInt($('#show_per_page').val());

    start_from = page_num * show_per_page;

    end_on = start_from + show_per_page;

    $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

    $('.page_link[longdesc=' + page_num +']').addClass('index.php').siblings('.page2.php').removeClass('active_page');
        $('#current_page').val(page_num);
}
  </script>