前端实现局部刷新分页，但浏览器刷新后总是会回到第一页

Question

我利用Ajax获取数据后，前端实现了局部刷新分页效果。但有个问题是，每次浏览器刷新后会回到第一页，而不是当前停留的页码，这个问题怎么解决呢？

还有就是比如有一个图片网站，第一页是page1.html，总共有1000页难道就要建1000个html文件吗？有什么办法实现只有一个html文件，实现局部内容刷新过后，浏览器网页地址也能跟着改变，并且能支持浏览器刷新呢？

Answer 1

不知道你用的什么分页插件。你分页会有一个当前页的索引吧，每次点击下一页直接跳转到当前页，在地址栏加参数（当前页索引http://127.0.0.1:8020/index.html?page=2），每次进页面判断这个page是否存在，存在就直接显示page页数，不存在默认显示第一页。
下面是如何获取URL参数

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

Answer 2

你可以试试url后加书签#, 就像类似vue的路由一样
http://localhost/list#1
点击下一页的时候更改#后面的数字, 访问的时候先获取#后面的参数, 若存在直接显示那一页就行了

Answer 3

第一个问题：
你应该是通过点击按钮时向后端请求指定页面的数据的，那么在请求的时候必然需要将点击的那个页数传给后端，所以你可以把这个页数保存到sessionStorage里面，实现在页面第一次加载的时候去检测这个储存字段，把它的值给向后端的首次请求，代替默认请求第一页。另外在用这个值去处理分页的样式状态即可。

第二个问题：
数据刷新后浏览器地址跟着改变，可以在数据获取成功后，手动设置hash值来标识页数，这样页面不会改变，也记录下了状态。
实现浏览器刷新，可以在实现了上一步之后，在进入页面的时候前端检查hash值然后再向后端发起请求获取数据。
这样不管是刷新浏览器还是手动键入你制定的带hash的页面，前端都会去请求相应页数的数据，然后获取成功后改变新的hash并保持单页。

Answer 4

第一个问题：做成类似vue中的动态路由(hash)的形式；
第二个问题：为什么要有1000个html页面？分页是自己写的，每页的内容，可以使用ajax局部刷新加载出来啊，一个页面就行。

Answer 5

其实你这个做一个store本地化就可以了。原因是你刷新的时候，store会被初始化，因为它存在内存中