JS如何将点击函数的path_str变量传递至其他函数以重开模态框？

问题背景 #

点击带有data-availability="Available"属性的SVG路径时，会触发以下逻辑：

1. 生成该路径的序列化字符串path_str
2. 调用get_data_mapping_for_id()弹出加载数据的模态框
3. 模态框内操作需要登录，登录返回原页面后需重新打开对应模态框，因此需要让path_str能被其他函数访问

尝试过全局声明var path_str = ''但无效，用global path_str导致模态框崩溃，手动赋值静态SVG路径可行但无法满足动态需求。

可行解决方案 #

1. 正确使用全局变量（浏览器环境）

浏览器里没有global关键字（那是Node.js的专属语法），直接在所有函数外部声明变量即可：

// 全局作用域声明变量（放在所有函数外面）
let path_str = '';

$(document).on('click', 'path[data-availability="Available"]', function () {
   // 不要加var/let，直接赋值给全局的path_str
   path_str = new XMLSerializer().serializeToString(this);
   get_data_mapping_for_id(this);
});

// 其他函数里直接访问path_str
function yourOtherFunction(i) {
   if (i == 1){
      alert(path_str);
   }
}

2. 把path_str存在DOM元素的data属性中

不需要全局变量，将序列化字符串绑定到触发点击的SVG路径元素上，需要时再读取：

$(document).on('click', 'path[data-availability="Available"]', function () {
   const path_str = new XMLSerializer().serializeToString(this);
   // 把字符串存入当前路径的data属性
   $(this).data('path-serialized', path_str);
   get_data_mapping_for_id(this);
});

// 其他函数通过元素的data-map-id获取对应路径，再读取数据
function yourOtherFunction(i, targetMapId) {
   if (i == 1){
      const path_str = $('path[data-map-id="' + targetMapId + '"]').data('path-serialized');
      alert(path_str);
   }
}

3. 针对登录跳转场景：用SessionStorage持久化

因为登录会刷新页面，全局变量和DOM数据都会丢失，这时候用sessionStorage存储，页面刷新后还能读取：

$(document).on('click', 'path[data-availability="Available"]', function () {
   const path_str = new XMLSerializer().serializeToString(this);
   const mapId = $(this).attr('data-map-id');
   // 用mapId作为键存储，避免不同路径冲突
   sessionStorage.setItem('selectedPath_' + mapId, path_str);
   get_data_mapping_for_id(this);
});

// 登录返回页面后，恢复模态框逻辑
function restoreModalAfterLogin(mapId) {
   const path_str = sessionStorage.getItem('selectedPath_' + mapId);
   if (path_str) {
      // 这里可以用path_str重新触发模态框逻辑，或者做其他操作
      alert(path_str);
      // 用完移除，避免重复触发
      sessionStorage.removeItem('selectedPath_' + mapId);
   }
}

// 页面加载时检查是否需要恢复（假设登录后通过URL参数传递mapId）
$(document).ready(function() {
   const urlParams = new URLSearchParams(window.location.search);
   const mapId = urlParams.get('mapId');
   if (mapId) {
      restoreModalAfterLogin(mapId);
   }
});

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