本文介绍如何利用 localstorage 在页面刷新后仍保留用户自定义的字体大小设置，并通过 javascript 动态应用、同步按钮高亮状态，实现真正的“记住偏好”体验。
本文介绍如何利用 localstorage 在页面刷新后仍保留用户自定义的字体大小设置，并通过 javascript 动态应用、同步按钮高亮状态，实现真正的“记住偏好”体验。
在构建可访问性友好或用户定制化程度高的网站时，允许用户调整正文字体大小是一项重要功能。但若每次刷新页面都重置为默认值，会显著降低用户体验。解决这一问题的核心在于：将用户选择持久化存储，并在页面加载时自动还原。localStorage 正是为此类轻量级客户端状态管理而设计的理想工具。
✅ 基础实现逻辑
整个流程分为两个关键阶段：
-
保存选择：当用户点击某个字号按钮时，不仅立即应用该字号，同时调用
localStorage.setItem('fontSize', size)将其写入浏览器本地存储； -
恢复状态：在页面加载完成（
window.onload或更推荐的DOMContentLoaded）时，读取localStorage.getItem('fontSize')，若有值则直接赋给目标元素的style.fontSize。
以下是优化后的完整实现（已移除内联 onclick，改用事件委托提升可维护性）：
<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>// 获取核心 DOM 元素
const textElement = document.getElementById('text');
const buttons = document.querySelectorAll('.btn');
// 页面加载时恢复字体大小
document.addEventListener('DOMContentLoaded', () => {
const savedSize = localStorage.getItem('fontSize');
if (savedSize) {
textElement.style.fontSize = savedSize;
// 同步高亮对应按钮
const activeBtn = Array.from(buttons).find(btn => btn.dataset.size === savedSize);
if (activeBtn) {
setActiveButton(activeBtn);
}
} else {
// 默认设置：1em，并确保首个按钮高亮
textElement.style.fontSize = '1em';
setActiveButton(buttons[0]);
}
});
// 设置按钮高亮状态（复用逻辑）
function setActiveButton(btn) {
buttons.forEach(b => b.classList.remove('clicked'));
btn.classList.add('clicked');
}
// 绑定点击事件
buttons.forEach(button => {
button.addEventListener('click', () => {
const size = button.dataset.size;
textElement.style.fontSize = size;
localStorage.setItem('fontSize', size);
setActiveButton(button);
});
});⚠️ 注意事项与最佳实践
-
避免内联事件处理器：如原代码中的
onclick="..."，既不利于维护，也阻碍语义化与无障碍支持。应统一使用addEventListener； -
使用
DOMContentLoaded替代window.onload：前者在 DOM 构建完成即触发，无需等待图片等资源加载，响应更快； -
按钮语义化增强：将
<span></span>改为<button type="button"></button>，并添加role="group"和aria-label，显著提升屏幕阅读器兼容性； -
健壮性处理：读取
localStorage时需检查返回值是否为null或undefined，防止意外错误； -
CSS 变量进阶建议：若项目已使用 CSS 自定义属性（如
:root { --font-size: 1em; }），可改为动态更新document.documentElement.style.setProperty('--font-size', size)，使样式更易全局复用。
✅ 总结
通过结合 localStorage 的持久化能力与 DOM 操作的即时反馈，我们不仅能记住用户的字体偏好，还能精准同步 UI 状态。这不仅是技术实现，更是对用户控制权与连续体验的尊重。只需少量代码，即可让个性化设置真正“扎根”于用户浏览器中——下次打开，一切如初。
