The front end implements local refresh paging, but the browser always goes back to the first page after refreshing.

after I use Ajax to get the data, the front end implements the effect of local refresh paging. But there is a problem, each browser refresh will return to the first page, rather than the current stay page number, how to solve this problem?

there is also, for example, there is a picture website, the first page is page1.html, there are a total of 1000 pages. Is it necessary to build 1000 html files? Is there any way to achieve only one html file, so that after partial content refresh, the browser web address can also be changed, and can support browser refresh?


you can try url and bookmark -sharp , just like a route similar to vue
http://localhost/list-sharp1
change the number after-sharp when you click on the next page, get the parameters after-sharp first when you visit, and just display that page directly if there is one.


I don't know what paging plug-in you use. Your paging will have an index of the current page, every time you click on the next page to jump directly to the current page, add parameters in the address bar (current page index http://127.0.0.1:8020/index.html?page=2), every time you enter the page to determine whether this page exists, it directly displays the number of page pages, and there is no default display of the first page.
here is how to get the URL parameter

    function getUrlParmes(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        var q = window.location.pathname.substr(1).match(reg_rewrite);
        if(r != null){
            return unescape(r[2]);
        }else if(q != null){
            return unescape(q[2]);
        }else{
            return null;
        }
    }

first question:
you should request the data of the specified page from the backend when you click the button, then you must send the number of clicked pages to the backend when you request it, so you can save this page to sessionStorage to detect the storage field when the page loads for the first time, and give its value to the first request to the backend instead of the default request for the first page. In addition, you can use this value to deal with the style status of paging.

second question:
the browser address changes after the data is refreshed. After the data is successfully obtained, you can manually set the hash value to identify the number of pages, so that the page does not change and the status is recorded.
implements browser refresh. After implementing the previous step, the front end checks the hash value when entering the page, and then initiates a request to the back end to get the data.
in this way, whether it is refreshing the browser or manually typing your page with hash, the front end will request the data for the corresponding number of pages, and then change the new hash after success and keep the single page.


first question: make it similar to dynamic routing (hash) in vue;
second question: why should there be 1000 html pages? Paging is written by yourself, the content of each page, you can use ajax local refresh to load out ah, a page on the line.


in fact, you can localize a store. The reason is that when you refresh, store will be initialized because it is stored in memory

Menu