实现缓存el-table分页大小，用户新建标签打开该页面需保持分页大小（考虑是否为嵌入式页面）

需求：每个表格的分页大小以本地缓存的方式存到浏览器本地，然后用户下次打开的时候获取这个本地存储的值如果没有就用页面默认的值，如果有则先判断是不是有效的(是) 无效用默认有效就用这个缓存值,需要区分是否为嵌入式页面

分析：

1、存页大小的时候需要考虑一下嵌入页面 const ancestors = location.ancestorOrigins;

如果这个数组有长度就把第一个拿出做隔离；比如打开页面之后开始拼接key 比如规则页面我就取 key=`calc_${ location.ancestorOrigins[0],}` 去取值；如果没被嵌入 location.ancestorOrigins的长度就是0 就取不到值 key就直接取`cacl_`

意思是比如我列表嵌入到a网址他会给a网站存一个页大小嵌入到b网站会给b网站保持一个页大小互不相干

2、后面我们把那个列宽度和排序字段查询条件也可以存到这里面，所以我们直接使用存对象的方式key:{}

直接封装工具函数（可直接复制使用）

在项目src文件夹下面的工具函数文件夹utils下直接新建localStorageUtil.js，写入以下代码：

// 工具函数，用于存取分页大小、其他数据
export const useLocalStorageData = (keyPrefix = '', defaultData = {}) => {
    const getCacheKey = () => {
      if (location.ancestorOrigins.length) {
        return `${keyPrefix}${location.ancestorOrigins[0]}`;
      }
      return `${keyPrefix}`;
    };
  
    const getCacheData = () => {
      const cacheKey = getCacheKey();
   
      const cacheData = localStorage.getItem(cacheKey);
   

      if (cacheData) {
        return JSON.parse(cacheData);
      }
      return defaultData;
    };
  
    const saveCacheData = (data) => {
      const cacheKey = getCacheKey();
   

      localStorage.setItem(cacheKey, JSON.stringify(data));
    };
  
    const getData = (key) => {
      const cacheData = getCacheData();
      if (cacheData[key]!==undefined) {
        return cacheData[key];
      }
      return defaultData[key];
    };
  
    const saveData = (key, value) => {
     
      const cacheData = getCacheData();
      cacheData[key] = value;
      saveCacheData(cacheData);
    };
  
    // 返回需要暴露的属性和方法
    return {
      getData,
      saveData,
    };
  };

页面引入使用：

import { useLocalStorageData } from '@/utils/localStorageUtil.js'
const defaultPageSize = 10//默认分页大小

const { getData, saveData } = useLocalStorageData('calc_', {})

//列表查询方法
function getCalcRules(RuleName: string, pageSize: number, currentPage: number) {
  api.calcRules.getCalcRules({ RuleName: RuleName, PageSize: pageSize, Page: currentPage }).then(res => {
    if (res != null && res[0] != null && res[0].status == 200) {
      totalData.tableData = res[0].data.records
      totalData.total = res[0].data.Total
    }
  })
}


// 获取分页大小
const pageSize = ref(getData('pageSize') || defaultPageSize)
const currentPage = ref(getData('currentPage') || defaultcurrentPage)

const handleSizeChange = (val: number) => {
  saveData('pageSize', val)
  // 分页
  getCalcRules(RuleName.value, val, currentPage.value)//获取页面表格数据
}
const handleCurrentChange = (val: number) => {
  // 分页
  getCalcRules(RuleName.value, pageSize.value, val)//获取页面表格数据
}
// 获取初始页面本地数据
function getinitLocalData() {
  const cachedPageSize = getData('pageSize')
 

  // 如果本地缓存中不存在分页大小，则保存默认值

  if (cachedPageSize === undefined) {
    saveData('pageSize', defaultPageSize)
    pageSize.value = defaultPageSize
  } else {
    pageSize.value = cachedPageSize
  }


}
onMounted(() => {

  getinitLocalData()
  // 在获取到页码和页大小后，调用 getCalcRules 方法获取页面数据
  getCalcRules(RuleName.value, pageSize.value, currentPage.value)
})

如果以后还有表格搜索条件等数据需要缓存，可以按照上面关于pagesize的缓存和提取的方式进行缓存和提取