使用 localstorage 持久化保存用户选择的每页条数：初始化时读取并设默认值（如10），用户切换时立即保存，注意字符串转换、兜底处理及多表格前缀区分。
直接用 localStorage 保存用户选择的每页条数，加载时读取并应用即可。关键在于写入时机（用户切换时）、读取时机（表格初始化前），以及提供合理默认值防异常。
1. 初始化时读取并设置默认页容量
页面加载后，先尝试从 localStorage 读取已保存的页大小；若不存在或无效，则使用业务默认值（如 10）：
const DEFAULT_PAGE_SIZE = 10;
let pageSize = parseInt(localStorage.getItem('tablePageSize')) || DEFAULT_PAGE_SIZE;
// 应用到分页控件（例如 select 下拉框）
const pageSizeSelect = document.getElementById('pageSizeSelect');
if (pageSizeSelect) {
pageSizeSelect.value = pageSize;
}
// 同时用于初始化表格数据请求或本地分页逻辑
loadTableData({ pageSize });
2. 用户切换页大小时立即保存
监听页大小选择器（如 <select></select> 或按钮组）的变更事件，在值确定后存入 localStorage：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
document.getElementById('pageSizeSelect').addEventListener('change', function() {
const selected = parseInt(this.value);
if (!isNaN(selected) && selected > 0) {
localStorage.setItem('tablePageSize', selected.toString());
// 触发重新加载或重分页
loadTableData({ pageSize: selected });
}
});
3. 注意兼容性与清理场景
localStorage 是同步、同源、字符串键值对存储，无需额外库。但需注意：
- 只支持字符串值，务必用
parseInt()或JSON.parse()转回数字 - 用户手动清空浏览器数据或隐私模式下会丢失，代码中必须有兜底默认值
- 如支持多表格且需独立设置，可加前缀区分：
'tableUserListPageSize'、'tableOrderListPageSize' - 不建议频繁写入（如输入过程中），页大小属低频操作，
change事件足够
4. 可选：封装成复用函数
便于多个表格统一管理，例如：
function getStoredPageSize(key, fallback = 10) {
const val = localStorage.getItem(`tablePageSize_${key}`);
return Number(val) || fallback;
}
function savePageSize(key, size) {
if (Number.isInteger(size) && size > 0) {
localStorage.setItem(`tablePageSize_${key}`, size.toString());
}
}
// 使用示例
const userPageSize = getStoredPageSize('users');
savePageSize('users', 25);
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
