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

蔚落 2024-03-17 17:04 18阅读 0赞

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 属性][1. Window localStorage]

[2. Window sessionStorage 属性][2. Window sessionStorage]

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

[1. Window localStorage]: https://www.runoob.com/jsref/prop-win-localstorage.html
[2. Window sessionStorage]: https://www.runoob.com/jsref/prop-win-sessionstorage.html
[3. element-ui_current-page_current-change_bug]: https://blog.csdn.net/qq_33692349/article/details/91490480?spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-7-91490480-blog-121610780.235%5Ev38%5Epc_relevant_default_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-7-91490480-blog-121610780.235%5Ev38%5Epc_relevant_default_base&utm_relevant_index=11