大良营销网站建设讯息,永川网站建设熊掌号,优秀企业网站的优缺点,企业seo排名有 名需求#xff1a;每个表格的分页大小 以本地缓存的方式存到浏览器本地#xff0c;然后用户下次打开的时候 获取这个本地存储的值 如果没有就用页面默认的值#xff0c;如果有 则先判断是不是有效的(是) 无效用默认 有效就用这个缓存值,需要区分是否为嵌入式页面 分析#xf… 需求每个表格的分页大小 以本地缓存的方式存到浏览器本地然后用户下次打开的时候 获取这个本地存储的值 如果没有就用页面默认的值如果有 则先判断是不是有效的(是) 无效用默认 有效就用这个缓存值,需要区分是否为嵌入式页面 分析 1、存页大小的时候 需要考虑一下嵌入页面 const ancestors location.ancestorOrigins;
如果这个数组有长度 就把第一个 拿出做隔离比如打开页面之后 开始拼接key 比如规则页面 我就取 keycalc_${ 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的缓存和提取的方式进行缓存和提取
