使用Local Storage或Cookie检测megaMenu点击状态的实现问题

嘿，我看了你写的代码，核心逻辑其实没问题，但第二页拿不到megaClicked = true的原因很简单——你只在第一页初始化时读取了LocalStorage，但第二页完全没做这个读取操作呀！

先给你梳理下问题：你在第一页点击菜单时把状态存在了LocalStorage里，但第二页加载时根本没去读这个存储的值，自然拿不到更新后的状态。下面给你调整后的完整方案：

1. 第一页（菜单所在页面）的优化代码 #

// 初始化状态：优先读LocalStorage，没有的话用默认值
let megaClicked = JSON.parse(localStorage.getItem('mega')) || { value: false };
const megaMenu = $("#menu-top-navigation > div");

// 绑定菜单点击事件
megaMenu.on('click', function () {
  megaClicked.value = true;
  // 把更新后的状态存回LocalStorage
  localStorage.setItem('mega', JSON.stringify(megaClicked));
  // 这里别忘了加你的跳转逻辑，比如跳转到第二页
  // window.location.href = '/your-second-page-url';
});

这里把初始化逻辑简化了，用||直接处理LocalStorage为空的情况，比原来的if判断更简洁，逻辑是完全一致的。

2. 第二页（跳转后的页面）的读取代码 #

关键来了！第二页必须在加载时主动去读LocalStorage里的状态，代码如下：

// 页面加载时读取存储的状态，同样做默认值兜底
const megaClicked = JSON.parse(localStorage.getItem('mega')) || { value: false };

// 现在你就可以用这个状态做任何你需要的操作了
if (megaClicked.value) {
  console.log('用户之前点击过mega菜单！');
  // 这里写你的业务逻辑，比如显示特定内容、修改页面样式等
}

几个注意点 #

• 确保第二页也引入了jQuery（如果用了$选择器的话），如果不想依赖jQuery，把选择器换成原生JS的document.querySelector('#menu-top-navigation > div')就行。
• 如果用户清除了浏览器缓存/本地存储，状态会自动回到默认的false，这是正常行为。
• 如果你只是需要在跳转时临时传递这个状态，也可以考虑用URL参数（比如?megaClicked=true），但LocalStorage更适合需要在多个页面长期保持状态的场景。

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