本文介绍如何通过 localStorage 实现点击触发后，在多个 HTML 页面（如 mypics1.html、mypics2.html）中统一移除 .border_blue 并添加 .border_red 样式，无需 jQuery，纯原生 JavaScript 即可高效完成状态同步与 DOM 操作。
本文介绍如何通过 localstorage 实现点击触发后，在多个 html 页面（如 mypics1.html、mypics2.html）中统一移除 `.border_blue` 并添加 `.border_red` 样式，无需 jquery，纯原生 javascript 即可高效完成状态同步与 dom 操作。
在实际开发中，若需让用户操作（如点击某个 div）产生的视觉变化（如图片边框样式切换）跨多个独立 HTML 页面生效，仅靠 jQuery 的 removeClass()/addClass() 是不够的——因为这些方法只作用于当前页面 DOM，无法自动同步到其他页面。关键在于持久化存储用户操作状态，并在每个页面加载时读取该状态并应用对应样式。
✅ 推荐方案：使用 localStorage + 原生 JavaScript
localStorage 可在同源（同一协议、域名、端口）下长期保存字符串数据，完美适配多页共享状态需求。相比引入 jQuery，原生方案更轻量、性能更高，且现代浏览器兼容性极佳（支持 IE10+ 及所有主流浏览器）。
以下为可复用的解决方案：
1. 创建通用脚本文件 scripts/img-border-toggle.js
// scripts/img-border-toggle.js
const TOGGLE_STATE_KEY = 'imgBorderToggleState';
// 切换所有匹配图片的样式类
const toggleImageBorders = () => {
document.querySelectorAll('img.border_blue').forEach(img => {
img.classList.remove('border_blue');
img.classList.add('border_red');
});
};
// 监听点击事件：仅当点击 .mydiv（注意大小写一致性，原文中为 .mydiv，但示例代码用 .myDiv，此处按标准小写处理）
document.addEventListener('click', (e) => {
if (e.target.closest('div.mydiv')) {
localStorage.setItem(TOGGLE_STATE_KEY, 'active');
toggleImageBorders();
}
});
// 页面加载时检查状态并自动应用
if (localStorage.getItem(TOGGLE_STATE_KEY) === 'active') {
toggleImageBorders();
}⚠️ 注意事项：
- 确保所有页面均引入该脚本（推荐放在 <body> 底部或使用 defer 属性）：
<script src="scripts/img-border-toggle.js" defer></script>- CSS 类名需保持一致（如 .border_blue、.border_red），且目标 <img> 元素初始必须含有 .border_blue 类。
- closest() 方法用于安全判断点击是否发生在目标元素或其子元素内，避免事件误触发。
2. 各页面 HTML 结构保持统一
每个页面（mypics1.html、mypics2.html 等）都应包含：
<!DOCTYPE html>
<html>
<head>
<style>
.border_blue { border: 3px solid blue; }
.border_red { border: 6px dashed red; }
</style>
</head>
<body>
<img class="border_blue" src="mypic.jpg" alt="Sample image">
<div class="mydiv">I'm Not Blue</div>
<!-- 必须引入统一脚本 -->
<script src="scripts/img-border-toggle.js" defer></script>
</body>
</html>3. 进阶优化建议
- 重置功能：如需支持“恢复蓝色边框”，可在脚本中扩展逻辑，例如监听右键或双击，或添加切换按钮，并将 localStorage 值设为 'inactive' 或直接 removeItem()。
- 作用域控制：若仅希望影响特定目录下的页面，可结合 location.pathname 做路径过滤。
- CSS 优先级保障：确保 .border_red 样式权重不低于 .border_blue（当前示例中 6px dashed red 已自然覆盖 3px solid blue，但复杂场景建议添加 !important 或调整选择器 specificity）。
通过该方案，用户在任一页面点击 .mydiv 后，后续访问所有同源页面时，所有带 .border_blue 的 <img> 都将自动显示为红色虚线边框——真正实现跨页面的交互状态同步。
