el-pagination 组件数据持久化，缓存当前页面数据

vue 文件演示：

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="cur_page"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="recordsTotal">
    </el-pagination>

一般在 handleCurrentChange ，即 @current-change 事件中缓存当前的页面页码数据

缓存的方法有：window.localStorage、sessionStorage

提示: 如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性， 该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

所以笔者个人推荐使用 sessionStorage 来缓存页码数据

然后怎么获取缓存的数据，然后在赋予缓存的页码数据的方法：（需要提醒的是缓存的数据是字符串，所以要转换为数字类型的数据，否则 el-pagination 组件会报错的）

如下举例：数据转换为数字类型的

sessionStorage.setItem("pagenum", "3");

this.pageNum = parseInt(sessionStorage.getItem("pagenum"))

在发送 api 接口前设置该操作，就可以在刷新页面后，停留当前页码的页面

---

参考链接

1. Window localStorage 属性

2. Window sessionStorage 属性

3. element-ui分页组件修改当前页current-page后current-change事件不触发的一个小bug