大连网站建站营销型网站建设的5大技巧

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

分析：

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