本博客后台有个文章列表页,数据是通过 ajax 加载数据的:

当我翻到第2页时,点击编辑按钮去编辑文章(列表页跟编辑页是同一个 iframe),之后点击浏览器的后退按钮,退回到列表页,但是列表页又从第1页开始加载了,而我希望它停留在之前的第2页不变。所以,在翻页时,要做个记住页码的功能。

曾想过用 cookie、localStore 实现,用 cookie 的话还得引入第三方 js 库,用 localStore 又担心兼容性差,最后还是回归到 form 表单上。

原理:一般情况下,浏览器后退到前一个页面,之前填写的 form 表单数据会被保留,方便我们再次修改提交。

每次触发 ajax 翻页操作时,把最新页码填充到 input 文本框。列表初始化时,取 input 文本框保存的页码,而不是写死为第1页。

注意:必须使用 input 标签,且 type="text",不能设置 autocomplete="off",也不能设置 readonly,可以用CSS display:none 进行隐藏。

<input type="text" id="page" value="1" style="display:none">

参考案例,见 Gitee 提交记录:https://gitee.com/yangrz/yangdx_blog/commit/925d21687088811e44c92d20b08f944533d10bfc