不用框架怎么用JavaScript管理个人网页的多页面状态

作者：木棉

时间：2026-11-12

在不引入现代前端重型框架的前提下，讲解如何使用原生JavaScript通过localStorage、sessionStorage、URLSearchParams与BroadcastChannel构建轻量、可靠且无闪烁的多页面状态管理体系。

文章目录

发布分类：前端工程与原生JavaScript实践阅读时长：约12分钟技术栈：HTML5 / Vanilla JS / Web Storage API

在没有 Vuex、Redux 或 Pinia 等单页框架内置状态库的情况下，多页面个人网页（MPA，Multi-Page Application）同样存在跨页面维持与同步状态的需求。例如全站明暗主题统一、文章阅读进度续读、代码高亮偏好设置、待办表单暂存，以及在多个标签页之间实时同步状态变更。解决这一问题的核心逻辑，在于基于浏览器提供的原生接口建立分层存取与事件通道：使用 localStorage 承载长期偏好，使用 sessionStorage 保障单标签会话隔离，借助 URLSearchParams 实现可回退与可分享的页面状态，并通过 BroadcastChannel 或 storage 事件完成跨标签页的即时双向联动。

不用框架怎么用JavaScript管理个人网页的多页面状态 — 图 1 · 多页面原生状态管理全景架构与数据交互流向

一、多页面状态的物理特征与原生介质分类

与单页应用（SPA）所有组件共用同一个常驻内存的 JavaScript 执行环境不同，多页面网站在用户每一次点击链接或跳转新页面时，当前页面的 JavaScript 引擎堆栈、全局对象 window 以及所有运行时变量都会被彻底销毁并在目标页面重新建立。这意味着传统的内存变量赋值（如 window.myState = {...}）完全无法在页面跳转后保留。

管理个人多页面网页状态的第一步，是根据数据的生命周期、访问作用域与传播特性，将零散的状态划分到对应的原生载体中：

持久全局偏好（Origin 级别共享）：适合存放明暗主题配置（theme: 'dark'）、字体缩放比例、文章赞赏或收藏列表。这类数据要求用户关闭浏览器甚至重启设备后依然有效，物理归宿是 localStorage。
临时会话状态（Tab 隔离）：适合存放未提交的多步骤表单草稿、单次阅读时的章节阅读深度或折叠面板展开状态。这类数据要求在同一个标签页内翻页跳转时不丢失，但用户若新开标签页浏览其他内容，两边不应相互干扰，物理归宿是 sessionStorage。
寻址与可分享状态（URL 驱动）：适合存放搜索关键字、内容标签筛选器、分页页码及锚点。这类状态必须直接暴露在浏览器地址栏中，用户复制链接发送给他人或加入书签时，对方打开必须能够准确复原对应的视图状态。
跨页面即时通信信号（通道驱动）：适合在用户打开多个标签页时，通知其他未处于前台的页面“状态已更新，请即刻同步”，例如在设置页切换了暗黑模式后，阅读页无需刷新即可实时切换样式，物理归宿是 BroadcastChannel 或 window.onstorage。

二、防范首屏白屏与闪烁：关键状态的就地水合

在个人网页开发中，最常见的体验问题是“主题闪烁（FOUC, Flash of Unstyled Content）”。例如用户设定了暗黑主题，但每次刷新或跳转到新页面时，屏幕先白屏闪一下，随后才变成黑色。产生这种问题的根本原因，是开发者习惯于把状态读取与样式切换代码写在外部脚本或者 DOMContentLoaded 事件回调中。

当浏览器解析 HTML 文档时，解析器自上而下运行。如果在页面渲染出 DOM 树之后才去执行 JavaScript 读取 localStorage，浏览器早已按照默认的浅色样式完成了首次绘制（First Paint），后续添加样式类名必然导致二次重绘与肉眼可见的闪烁。

正确的做法是在 HTML 文档的 <head> 标签最前部、所有外链 CSS 样式表加载之前，嵌入一段极简、无依赖且同步执行的内联脚本。由于 localStorage.getItem 是同步阻塞式 I/O，该脚本在解析阶段立即完成属性注入，阻止无样式的闪烁：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!-- 关键：在任何 CSS 加载之前立即同步水合全局主题 -->
  <script>
    (function () {
      try {
        // 优先读取持久化配置，若无则查询系统级明暗偏好
        var savedTheme = localStorage.getItem('site_theme');
        var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        var theme = savedTheme ? savedTheme : (prefersDark ? 'dark' : 'light');
        document.documentElement.setAttribute('data-theme', theme);
      } catch (e) {
        // 在无痕模式受阻时安全降级
        document.documentElement.setAttribute('data-theme', 'light');
      }
    })();
  </script>
  <link rel="stylesheet" href="/assets/style.css">
</head>

在对应的 CSS 中，利用属性选择器 html[data-theme='dark'] 定义整套颜色变量。这样在 DOM 节点被构建的最初毫秒内，CSS 引擎就能读取到正确的数据属性，彻底消除界面跳跃。

三、构建轻量级原生统一状态管理器（Vanilla Store）

在多个页面中直接散落调用原生的 localStorage.setItem 和 getItem 存在几个严重缺陷：一是对象类型需要反复手动调用 JSON.stringify 与 JSON.parse；二是键名缺少统一前缀容易冲突；三是同页面内的其他代码逻辑无法感知数据的变化。因此，需要封装一个不足百行的通用状态模块 store.js，各页面通过 <script src="store.js"></script> 引入。

以下是具备命名空间隔离、自动序列化容错、发布订阅（Pub/Sub）以及跨标签通信能力的轻量状态管理实现：

/**
 * 极简原生多页面状态管理核心 Store
 */
class VanillaStore {
  constructor(options = {}) {
    this.namespace = options.namespace || 'blog_state:';
    this.storage = options.storage || window.localStorage;
    this.subscribers = new Map();
    this.memoryCache = new Map();

    // 1. 初始化 BroadcastChannel 跨页面通信
    this.channelName = options.channelName || 'blog_state_channel';
    if (typeof window.BroadcastChannel !== 'undefined') {
      this.channel = new BroadcastChannel(this.channelName);
      this.channel.onmessage = (event) => {
        if (event.data && event.data.key) {
          const { key, value } = event.data;
          this.memoryCache.set(key, value);
          this._notify(key, value, false); // 跨页触发，isLocal=false
        }
      };
    } else {
      // 2. 降级兼容 window storage 事件
      window.addEventListener('storage', (e) => {
        if (e.key && e.key.startsWith(this.namespace)) {
          const rawKey = e.key.slice(this.namespace.length);
          try {
            const parsedVal = e.newValue ? JSON.parse(e.newValue) : null;
            this.memoryCache.set(rawKey, parsedVal);
            this._notify(rawKey, parsedVal, false);
          } catch (err) {
            console.error('Storage 解析异常', err);
          }
        }
      });
    }
  }

  _getStorageKey(key) {
    return `${this.namespace}${key}`;
  }

  /**
   * 读取状态（优先读取内存缓存，未命中则同步读存储）
   */
  get(key, defaultValue = null) {
    if (this.memoryCache.has(key)) {
      return this.memoryCache.get(key);
    }
    try {
      const raw = this.storage.getItem(this._getStorageKey(key));
      if (raw === null) return defaultValue;
      const parsed = JSON.parse(raw);
      this.memoryCache.set(key, parsed);
      return parsed;
    } catch (e) {
      return defaultValue;
    }
  }

  /**
   * 写入状态并同步触发本地监听与外部页面广播
   */
  set(key, value) {
    this.memoryCache.set(key, value);
    try {
      this.storage.setItem(this._getStorageKey(key), JSON.stringify(value));
    } catch (e) {
      console.warn('存储写入受限（无痕模式或配额满）', e);
    }

    // 触发当前页面监听器
    this._notify(key, value, true);

    // 广播到其他打开的同源页面
    if (this.channel) {
      try {
        this.channel.postMessage({ key, value });
      } catch (e) {
        console.warn('广播发送失败', e);
      }
    }
  }

  /**
   * 订阅状态变化
   */
  subscribe(key, callback) {
    if (!this.subscribers.has(key)) {
      this.subscribers.set(key, new Set());
    }
    this.subscribers.get(key).add(callback);
    return () => {
      const bucket = this.subscribers.get(key);
      if (bucket) bucket.delete(callback);
    };
  }

  _notify(key, value, isLocal) {
    const listeners = this.subscribers.get(key);
    if (listeners) {
      listeners.forEach((callback) => {
        try {
          callback(value, isLocal);
        } catch (err) {
          console.error(`订阅回调执行出错 [${key}]:`, err);
        }
      });
    }
  }
}

// 导出全局单例
window.appStore = new VanillaStore();

四、跨标签页实时同步与双向响应机制

多页面网站常见的使用场景是：用户在标签页 A（如文章列表页）阅读，同时在标签页 B 打开了“偏好设置页”，将字体大小从默认调整为“大号”，并将主题设为“深色”。如果在标签页 A 中没有任何感知机制，用户切换回标签页 A 时依然是旧布局，甚至在标签页 A 操作时会用旧数据覆盖新设置。

在原生 JavaScript 中，实现跨标签页通知有两种技术路径：

现代通道：BroadcastChannel API
BroadcastChannel 是 W3C 专门为同源多窗口通信设计的标准化 API。任何打开的同源上下文（窗口、IFrame 或 Web Worker）只要加入同一个命名通道，就可以使用 postMessage 广播数据。它的传输支持结构化克隆对象，性能开销极小。
经典机制：window.addEventListener('storage')
当任意同源页面对 localStorage 执行 setItem、removeItem 或 clear 时，浏览器会向除了发起修改操作的那个窗口之外的所有其他同源窗口派发 storage 事件。该事件自带 key、oldValue、newValue 和 url 属性，是绝佳的原生降级机制。

注意边界特性：storage 事件仅针对 localStorage 变化生效，修改 sessionStorage 是绝对不会触发跨窗口 storage 事件的。此外，发起修改的当前页面本身不会收到属于自己的 storage 事件，这也是为什么统一 Store 模块内部必须同时实现本地发布订阅分发。

实战演练：在页面中挂载订阅逻辑

在设置页面（settings.html）中，用户点击按钮切换字号：

<!-- settings.html -->
<button id="font-large-btn">切换大号字体</button>

<script src="/assets/store.js"></script>
<script>
  const btn = document.getElementById('font-large-btn');
  btn.addEventListener('click', () => {
    const current = window.appStore.get('fontSize', 'medium');
    const next = current === 'medium' ? 'large' : 'medium';
    window.appStore.set('fontSize', next);
  });
</script>

在后台已经打开的文章阅读页（reader.html）中，只需注册针对该键名的监听，即可实现无需刷新页面的自动响应：

<!-- reader.html -->
<script src="/assets/store.js"></script>
<script>
  // 页面载入时先应用初始字号
  const currentFont = window.appStore.get('fontSize', 'medium');
  document.body.classList.toggle('text-large', currentFont === 'large');

  // 注册订阅：当本页或外部标签页修改 fontSize 时，自动响应
  window.appStore.subscribe('fontSize', (newVal) => {
    document.body.classList.toggle('text-large', newVal === 'large');
  });
</script>

五、URL 状态管理与地址栏同步

并不是所有状态都适合塞进 localStorage。对于文章归档页的分类筛选标签、搜索关键字以及分页索引，如果存入本地存储，会导致用户将链接发送给朋友时，对方打开看到的是默认空页面。这类状态的唯一正确载体是浏览器的 URL 查询参数。

借助现代原生的 URLSearchParams 与 history.pushState / history.replaceState，可以在不重新加载整页的情况下平滑更新状态，同时支持浏览器的前进与后退按钮：

/**
 * URL 状态管理辅助工具
 */
const URLStateManager = {
  // 获取指定参数
  get(key) {
    const params = new URLSearchParams(window.location.search);
    return params.get(key);
  },

  // 更新参数：push=true 记录历史，push=false 仅替换当前记录
  set(key, value, push = false) {
    const url = new URL(window.location.href);
    if (value === null || value === undefined || value === '') {
      url.searchParams.delete(key);
    } else {
      url.searchParams.set(key, value);
    }
    
    if (push) {
      window.history.pushState({}, '', url.toString());
    } else {
      window.history.replaceState({}, '', url.toString());
    }
  }
};

// 监听浏览器前进/后退按钮导致的 URL 状态变化
window.addEventListener('popstate', () => {
  const currentCategory = URLStateManager.get('category') || 'all';
  renderArticleListByCategory(currentCategory);
});

六、边界情况与工程容错防线

在脱离框架的裸 JavaScript 环境中运行状态管理，必须严肃处理以下生产边界情况：

无痕模式（Incognito）与隐私限制：在部分旧版 Safari 或开启严格隐私保护的浏览器中，访问 localStorage 或 sessionStorage 会直接抛出 SecurityError 或 QuotaExceededError。如果代码中没有包裹 try...catch，整段脚本会直接中断并导致页面交互瘫痪。Store 模块中必须具备回退机制，当写入失败时转为内存 Map 临时存储。
版本迭代与脏数据升级：个人博客迭代时，状态的数据结构难免发生变化。例如旧版存储的 theme: 'dark'，新版需要扩展为 theme: { mode: 'dark', contrast: 'high' }。为了防止用户本地残留的旧数据导致反序列化崩溃，可在 Store 增加一个轻量版本戳，当检测到本地版本不一致时，自动清空或迁移该字段。
容量超限防范：localStorage 的单域名上限通常为 5MB 左右，适合存储配置标量或轻量索引，切勿用来缓存大篇幅的 Markdown 全文或 Base64 图片。大容量离线文本应按需升级到异步的 IndexedDB。