实现缓存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的缓存和提取的方式进行缓存和提取