本文介绍如何利用 localStorage 实现跨页面状态持久化，使用户在任一页面触发的样式切换（如移除 .border_blue、添加 .border_red）能自动同步到所有相关页面，无需 jQuery，纯 JavaScript 即可高效实现。
本文介绍如何利用 localstorage 实现跨页面状态持久化，使用户在任一页面触发的样式切换（如移除 `.border_blue`、添加 `.border_red`）能自动同步到所有相关页面，无需 jquery，纯 javascript 即可高效实现。
在实际开发中，常遇到需跨多个独立 HTML 文件（如 mypics1.html、mypics2.html 等）统一管理 DOM 样式状态的场景。例如：用户点击某页面中的
后，希望所有页面中带有 .border_blue 类的 ![]()
元素均切换为 .border_red 边框样式。此时，单靠 jQuery 或普通 DOM 操作无法跨页面生效——因为每个页面是独立加载的，内存与 DOM 状态互不共享。
✅ 正确解法是借助浏览器的 localStorage（持久化）或 sessionStorage（会话级），将用户操作转化为可跨页面读取的状态标识：
✅ 推荐方案：纯 JS + localStorage（零依赖）
将以下逻辑封装为独立脚本（如 scripts/img-border-toggle.js），并在所有目标页面中引入：
<script src="scripts/img-border-toggle.js" defer></script>
对应脚本内容如下：
// scripts/img-border-toggle.js
const TOGGLE_STATE_KEY = 'IMG_BORDER_TOGGLED';
// 执行样式切换：移除 .border_blue，添加 .border_red
const toggleImageBorders = () => {
document.querySelectorAll('img.border_blue').forEach(img => {
img.classList.remove('border_blue');
img.classList.add('border_red');
});
};
// 监听点击事件：仅当点击 .mydiv（或其子元素）时触发
document.addEventListener('click', e => {
if (e.target.closest('div.mydiv')) {
localStorage.setItem(TOGGLE_STATE_KEY, 'true');
toggleImageBorders();
}
});
// 页面加载时检查状态并自动应用（实现跨页同步）
if (localStorage.getItem(TOGGLE_STATE_KEY) === 'true') {
toggleImageBorders();
}
? 关键说明与注意事项
- 无需 jQuery：现代浏览器原生支持 classList 和 closest()，代码更轻量、性能更好；
- 状态持久化：localStorage 保持状态直至手动清除（如调用 localStorage.removeItem(TOGGLE_STATE_KEY)），适合长期偏好设置；
- 作用域限制：localStorage 按协议+域名+端口隔离，确保同源页面（如 http://localhost/mypics1.html 与 /mypics2.html）可共享状态；
-
样式定义需统一：所有页面必须包含相同的 CSS 规则：
.border_blue { border: 3px solid blue; } .border_red { border: 6px dashed red; } - 健壮性增强建议：可在 toggleImageBorders() 中加入 img.classList.contains('border_blue') 判断，避免重复操作；也可扩展为双向切换（记录原始状态，支持还原）。
通过该方案，用户只需在任意一个页面点击一次 .mydiv，后续打开的 mypics1.html、mypics2.html 等页面都会自动应用 .border_red 样式——真正实现“一处操作、多页生效”的用户体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
