本文介绍如何通过原生 javascript 结合 localstorage 实现跨页面（如 mypics1.html、mypics2.html）统一控制元素样式状态，避免依赖 jquery，确保点击触发的类切换操作在所有相关页面持久生效。
本文介绍如何通过原生 javascript 结合 localstorage 实现跨页面（如 mypics1.html、mypics2.html）统一控制元素样式状态，避免依赖 jquery，确保点击触发的类切换操作在所有相关页面持久生效。
在实际开发中，常遇到需要“一次操作、多页生效”的场景——例如用户在首页点击按钮后，希望所有图片在后续访问的图片列表页（mypics1.html、mypics2.html 等）中自动显示为红色虚线边框，而非初始的蓝色实线边框。原问题中尝试用 jQuery 在单页内操作 img 元素，但无法跨页面生效，根本原因在于：每个 HTML 文件是独立加载的，DOM 和脚本作用域不共享，且 jQuery 选择器仅作用于当前页面文档。
解决方案的核心是 状态持久化 + 跨页初始化，推荐使用浏览器原生 localStorage（长期保存）或 sessionStorage（会话级临时保存）。相比引入整个 jQuery 库，现代原生 DOM API 更轻量、性能更优，代码也更清晰。
✅ 推荐实现方式（模块化、可复用）
将逻辑封装为独立脚本 scripts/img-border-toggle.js，并在所有目标页面中引用：
<script src="scripts/img-border-toggle.js" defer></script>
对应脚本内容如下（已优化健壮性与可维护性）：
立即学习“前端免费学习笔记（深入）”；
// scripts/img-border-toggle.js
const TOGGLE_STATE_KEY = 'imageBorderToggled';
// 统一应用样式变更
const applyRedBorder = () => {
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');
applyRedBorder();
}
});
// 页面加载时检查状态并自动应用
if (localStorage.getItem(TOGGLE_STATE_KEY) === 'true') {
applyRedBorder();
}? 样式定义（所有页面共用）
确保各页面（包括 mypics1.html、mypics2.html）均包含一致的 CSS：
<style>
.border_blue { border: 3px solid blue; }
.border_red { border: 6px dashed red; }
</style>同时，图片需带有初始类名（如 <img class="border_blue" src="mypic.jpg">），且触发区域需含 div.mydiv（大小写敏感，注意原示例中 HTML 是 mydiv，JS 中应保持一致，此处按规范统一为小写）。
⚠️ 注意事项
- localStorage 是同源（协议+域名+端口）存储，确保所有页面部署在同一域名下（如 https://example.com/mypics1.html 和 https://example.com/mypics2.html）；
- 若需“全局重置”，可通过 localStorage.removeItem(TOGGLE_STATE_KEY) 或开发者工具清空；
- 如需支持服务端渲染（SSR）或 SEO 友好，建议结合 <noscript> 提示或服务端 Cookie 同步；
- 避免在 $(document).ready() 中重复操作——原 jQuery 方案无法跨页，且未处理状态持久化。
该方案轻量、标准、可扩展：未来若需增加其他元素（如 figure 或 video）的样式联动，只需扩展 applyRedBorder() 中的 querySelectorAll 选择器即可。
