跨JS文件共享变量失败：页面间颜色状态保持问题求助

问题描述 #

我是学了6个月的前端新手，现在做的项目需要实现：用户在第一页选好颜色后，跳转到第二页时颜色能保持一致。

我在第一个JS文件里定义了colorPicked和furniturePicked变量，用来存图片路径和颜色代码，然后想通过JS Modules把这两个变量导入第二个JS文件，但完全没用——不仅打不出变量值，连原本正常的汉堡菜单功能都失效了。我怀疑JS Modules只能在单个HTML文件里用，现在卡壳了，求帮忙。

相关场景细节 #

• 第一个JS文件里已经定义好待导出的colorPicked、furniturePicked变量，且函数执行后变量已经被正确赋值
• 第二个JS文件尝试导入这两个变量，但控制台没有输出，汉堡菜单功能异常
• 涉及两个独立页面：用户选择颜色的首页、需要同步颜色的第二页

解决方案 #

JS Modules的作用域是单个页面的执行上下文，页面跳转后之前的上下文会被销毁，所以跨页面共享数据不能用Modules导入导出，得用浏览器的本地存储API，推荐用localStorage或者sessionStorage：

1. 第一页保存选择数据 #

用户选完颜色后，把数据存到localStorage里：

// 第一页JS代码，用户选择完成后执行
function saveSelection(color, imgPath) {
  // 把对象转成字符串存储
  localStorage.setItem('userColorChoice', JSON.stringify({
    colorPicked: color,
    furniturePicked: imgPath
  }));
}

2. 第二页读取并应用数据 #

第二页加载时，从localStorage取数据，然后应用到页面上：

// 第二页JS代码，页面加载完成后执行
window.addEventListener('DOMContentLoaded', () => {
  const savedData = localStorage.getItem('userColorChoice');
  if (savedData) {
    const { colorPicked, furniturePicked } = JSON.parse(savedData);
    // 把颜色应用到目标元素，比如修改背景色
    document.querySelector('.your-target-element').style.backgroundColor = colorPicked;
    // 替换图片路径
    document.querySelector('.furniture-image').src = furniturePicked;
    
    console.log('读取到的选择：', colorPicked, furniturePicked);
  }
});

补充说明 #

• 如果只需要在当前浏览器会话保存（关闭浏览器就清除），用sessionStorage替换localStorage就行
• 汉堡菜单失效大概率是因为Modules导入时的语法错误或者作用域冲突，改用本地存储后不需要跨文件导入变量，原有功能应该能恢复正常
• 注意：本地存储只能存字符串，所以要用JSON.stringify()和JSON.parse()处理对象类型的数据

内容的提问来源于stack exchange，提问作者sebastián lozano