表格数据前端做缓存

如果你想要对表格做一个缓存处理，不想每次切换tab或者切换页面都重新获取数据，那你可以看看本篇文章，应该会为你提供一个新的思路

一、目标：

        常见的表格数据，有多个tabs标签页，每页下面有n个分页。如下图：

本文以element中的表格示例

二、构思

1.  首先要有一个标识当前标签页的 tabType 变量、记录表格数据的tableData、标识当前页码的 page
2.  使用sessionStorage将数据存储到本地（做这种数据缓存使用sessionStorage比较合适）
3.  存储数据的时机：获取新的数据之后
4.  清除数据的时机：操作完成之后需要更新数据时。或者更改搜索条件的时候

三、具体实现

1、定义变量（自己手动定义即可）

2、 数据存储

 第一步：在获取数据的方法中接受一个参数，用来标识需不需要清空数据（如果是操作完成需要刷新数据就传这个参数，如果是简单的切换tabs标签页就不需要传）

getTableFn(data){
    //1. 第一步 读取数据
    // 读取缓存中的数据
    let cacheTab = JSON.parse(sessionStorage.getItem('orderManCTab'))||{}
    // 如果不需要刷新数据，就会从缓存中读取数据
    if (data != 'refresh'&&cacheTab&&cacheTab[this.tabType]&&cacheTab[this.tabType][this.page]) {
        this.$set(this, 'tableData', cacheTab[this.tabType][this.page]||[])
        return
    }else if(data == 'refresh'){
        // 如果需要重新获取数据，先将缓存中的数据清空
        sessionStorage.removeItem('orderManCTab')
    }
    ...
}

第二步：如果此时是第一次获取数据，或者需要重新获取数据，就调用相应接口获取数据，并将其存储到本地

async getTableFn(data){
    ...
    // 第二步 获取数据并存储
    const {status,body} = await getApi(...);
    if(status==200){
        this.$set(this, 'tableData', body.list||[])
        let cacheObj = {}
        let cacheTab = JSON.parse(sessionStorage.getItem('orderManCTab'))
        // 如果没有缓存的数据
        if(!cacheTab){
            cacheTab = {}
            cacheObj[this.tabType] = {}
            cacheObj[this.tabType][this.page] = body.list||[]
        }else{
            cacheTab[this.tabType] = cacheTab[this.tabType]||{}
            cacheTab[this.tabType][this.page] = body.list||[]
        }
        sessionStorage.setItem('orderManCTab',JSON.stringify(cacheTab||cacheObj))
    }else{
        ...
    }
}

如果发现任何错误、或有一些建议，欢迎在评论区留言。