通过 localstorage 存储用户设定的字体大小，并在页面加载时自动恢复，可实现跨刷新的个性化阅读体验。本文提供完整、可直接运行的 html+javascript 实现方案，包含状态同步、默认回退与无障碍优化。
通过 localstorage 存储用户设定的字体大小，并在页面加载时自动恢复，可实现跨刷新的个性化阅读体验。本文提供完整、可直接运行的 html+javascript 实现方案，包含状态同步、默认回退与无障碍优化。
要让字体大小设置在页面刷新后依然生效，核心在于两步：保存用户选择（写入 localStorage）和恢复上次设置（页面加载时读取并应用）。下面是一个结构清晰、健壮且符合现代 Web 最佳实践的实现方案。
✅ 推荐实现（含状态同步与默认兜底）
首先，将内联 onclick 替换为事件委托式绑定，提升可维护性与语义化；同时使用 <button></button> 替代 <span></span>，增强可访问性（配合 role="group" 和 aria-label）：
<section class="sec"><div class="content">
<div class="buttons" role="group" aria-label="调整文字大小">
<button type="button" class="btn" data-size="1em">A</button>
<button type="button" class="btn" data-size="1.25em">A</button>
<button type="button" class="btn" data-size="1.75em">A</button>
</div>
<div class="text" id="text">
<h3>i'm an h3</h3>
<p>i'm a paragraph</p>
</div>
</div>
</section>
对应的 JavaScript（含错误处理与初始化逻辑）：
// 获取目标文本容器
const textElement = document.getElementById('text');
const buttons = document.querySelectorAll('.btn');
// 页面加载时恢复字体大小
window.addEventListener('load', () => {
const savedSize = localStorage.getItem('fontSize');
if (savedSize && /^[\d.]+(em|rem|px|%|vh)$/.test(savedSize)) {
applyFontSize(savedSize);
} else {
// 默认值：1em（同时写入 localStorage，确保首次访问也持久化）
applyFontSize('1em');
}
});
// 应用字体大小并同步 UI 状态
function applyFontSize(size) {
textElement.style.fontSize = size;
// 移除所有 .clicked 类
buttons.forEach(btn => btn.classList.remove('clicked'));
// 为匹配的按钮添加 .clicked 类
const targetBtn = Array.from(buttons).find(btn => btn.dataset.size === size);
if (targetBtn) targetBtn.classList.add('clicked');
}
// 绑定点击事件
buttons.forEach(button => {
button.addEventListener('click', () => {
const size = button.dataset.size;
localStorage.setItem('fontSize', size);
applyFontSize(size);
});
});
⚠️ 注意事项与最佳实践
-
安全性校验：
localStorage中的值可能被恶意篡改，因此在应用前建议用正则校验格式（如/^[\d.]+(em|rem|px|%|vh)$/），避免 CSS 注入风险； -
CSS 优先级：若
.text元素已有font-size的 CSS 声明（如font-size: 16px），内联样式style.fontSize会覆盖它；如需更高灵活性，推荐改用 CSS 自定义属性（如--text-size）配合:root设置，再通过document.documentElement.style.setProperty()控制； -
响应式兼容：对于移动端，建议结合
clamp()函数（如font-size: clamp(1rem, 2.5vw, 1.5rem)）保证可读性，再叠加用户偏好； -
无障碍支持：使用
<button></button>而非<span></span>，并确保aria-label描述明确；避免仅依赖颜色区分状态，可额外添加图标或aria-pressed属性。
✅ 总结
通过 localStorage.setItem() 和 localStorage.getItem() 配合 window.load 事件，即可轻松实现字体大小的持久化。关键在于：统一管理状态变更入口（applyFontSize()）、严格校验输入、同步 DOM 与存储、并为首次访问提供可靠默认值。该模式同样适用于主题色、语言偏好、夜间模式等其他用户自定义设置场景。
