如何为字体增减脚本添加Local Storage功能？

先说明原脚本的两处关键问题：

• 类选择器中多余的反斜杠会导致按钮绑定失效，比如$("\.resetFont")需改为$(".resetFont")
• 直接修改多个元素的像素字体大小，没有统一基准，不利于存储和恢复设置

以下是修复并集成LocalStorage功能的完整代码，同时优化了逻辑，用统一缩放比例管理字体大小，避免累积误差：

// 定义LocalStorage存储键名，方便统一维护
const FONT_SCALE_KEY = 'fontScale';

// 获取当前保存的缩放比例，默认1（原始大小）
function getCurrentFontScale() {
  const savedScale = localStorage.getItem(FONT_SCALE_KEY);
  return savedScale ? parseFloat(savedScale) : 1;
}

// 将缩放比例保存到LocalStorage
function saveFontScale(scale) {
  localStorage.setItem(FONT_SCALE_KEY, scale.toFixed(4)); // 保留4位小数避免精度异常
}

// 将缩放比例应用到所有目标元素
function applyFontScale(scale) {
  const fontTargets = ['body', 'p', 'table', 'tr', 'td', 'tbody', '.postcolor'];
  fontTargets.forEach(element => {
    $(element).css('font-size', `${scale}em`); // 用em相对单位，基于html根字体大小
  });
}

// 字体大小调整核心函数
var changeFontSize = function (increaseFont) {
  let currentScale = getCurrentFontScale();
  // 调整缩放比例
  currentScale = increaseFont ? currentScale * 1.05 : currentScale * 0.9;
  // 限制缩放范围（可选，避免字体过大/过小）
  currentScale = Math.max(0.7, Math.min(1.5, currentScale));
  // 保存并应用新比例
  saveFontScale(currentScale);
  applyFontScale(currentScale);
};

$(document).ready(function () {
  // 页面加载时恢复用户保存的缩放设置
  const initialScale = getCurrentFontScale();
  applyFontScale(initialScale);

  // 重置字体大小
  $(".resetFont").click(function () {
    saveFontScale(1);
    applyFontScale(1);
  });

  // 增大字体
  $(".increaseFont").on('click', function () {
    changeFontSize(true);
  });

  // 减小字体
  $(".decreaseFont").on('click', function () {
    changeFontSize(false);
  });
});

关键优化说明： #

• 统一缩放基准：用相对缩放比例代替直接修改像素值，存储和恢复更简单，避免多次调整后的精度误差
• LocalStorage逻辑封装：把获取、保存缩放比例的逻辑拆成独立函数，代码更易维护
• 修复选择器错误：移除类选择器中的多余反斜杠，确保按钮点击事件正常绑定
• 缩放范围限制：添加0.7-1.5的缩放区间，防止字体被调整到难以阅读的大小（可按需修改或移除）
• 精度处理：保存时保留4位小数，规避浮点数运算的精度问题

内容的提问来源于stack exchange，提问作者colorfullysarah