页面跳转后JS设置的font-family失效，如何解决？

嘿，我明白你的痛点了——现在你切换字体的逻辑只在当前页面的内存里生效，跳转页面后浏览器会重新加载所有资源，之前的设置自然就没了。要解决这个问题，核心是把用户的设置持久化存储在浏览器里，这样跨页面也能读取到。最适合这个场景的就是浏览器的localStorage API，它能把数据存在本地，除非用户手动清除，否则一直保留。

接下来给你一步步修改代码：

1. 修改设置页（settings.ejs）的逻辑：保存设置到localStorage #

我们需要在用户点击切换字体时，把选中的字体索引（或者直接存字体值）保存到localStorage里，同时初始化的时候先读取之前的设置，这样用户回到设置页也能看到之前选的字体。

修改设置页的JavaScript代码：

const fonts = [
  'Arial, Helvetica, sans-serif',
  '"Times New Roman", Times, serif',
  '"Courier New", Courier, monospace',
  'monospace',
];

// 初始化时优先读取本地存储的索引，没有的话用默认值0
let i = parseInt(localStorage.getItem('selectedFontIndex')) || 0;

document.getElementById('fontCh').addEventListener('click', () => {
  i++;
  if (i === fonts.length) i = 0;
  // 每次切换后，把当前索引保存到localStorage
  localStorage.setItem('selectedFontIndex', i);
  
  // （可选）如果设置页需要实时预览字体效果，可以在这里修改预览元素的样式
  // 比如你可以在设置页加个预览文本：<p id="fontPreview">字体预览</p>
  // document.getElementById('fontPreview').style.fontFamily = fonts[i];
});

2. 修改文本页（read.ejs）的逻辑：读取localStorage的设置并应用 #

在文本页加载的时候，先从localStorage里读取之前保存的字体设置，然后把它应用到文本元素上，没有保存的设置就用默认值。

修改文本页的JavaScript代码：

const fonts = [
  'Arial, Helvetica, sans-serif',
  '"Times New Roman", Times, serif',
  '"Courier New", Courier, monospace',
  'monospace',
];

// 读取本地存储的索引，用0作为兜底默认值
const savedFontIndex = parseInt(localStorage.getItem('selectedFontIndex')) || 0;
const targetFont = fonts[savedFontIndex];

// 把选中的字体应用到文本元素
document.getElementById('text').style.fontFamily = targetFont;

额外说明 #

• localStorage存储的是字符串类型，所以我们用parseInt把读取到的索引转成数字，避免类型问题
• 如果之后要添加更多设置（比如字体大小、行高、主题色），都可以用同样的方式，把对应的值存在localStorage里，然后在目标页面读取应用
• 极端情况：如果用户浏览器禁用了localStorage，这个方案会 fallback 到默认值，你可以加个简单的兼容性判断，比如：

  function isLocalStorageAvailable() {
    try {
      const key = '__test_local_storage__';
      localStorage.setItem(key, key);
      localStorage.removeItem(key);
      return true;
    } catch (e) {
      return false;
    }
  }
  

  然后在初始化的时候判断，如果不可用就提示用户或者用默认设置。

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