如何在多网页间传递唯一标识符dataid？

一、Neocities静态托管的短期客户端方案 #

因为Neocities是纯静态环境，没法改服务端配置，用JS自动处理查询参数是最省心的方案，不用手动修改所有链接：

1. 通用提取dataid的工具函数 #

在每个页面里加这个函数，用来获取当前URL里的dataid：

function getDataId() {
  const params = new URLSearchParams(window.location.search);
  return params.get('dataid') || '';
}

2. 自动给所有内部链接追加dataid #

在每个页面的DOM加载完成后，遍历所有<a>标签，自动带上当前的dataid：

document.addEventListener('DOMContentLoaded', () => {
  const dataId = getDataId();
  if (!dataId) return;

  document.querySelectorAll('a').forEach(link => {
    // 跳过外部链接，只处理同域名的页面
    if (link.host !== window.location.host) return;
    
    const url = new URL(link.href);
    // 避免重复添加参数
    if (!url.searchParams.has('dataid')) {
      url.searchParams.set('dataid', dataId);
      link.href = url.toString();
    }
  });
});

这样不管是正常跳转还是开新标签页，链接都会自动带上当前的dataid，完全满足你列的4个需求。

3. 着陆页的跳转逻辑 #

用户选择数据集后，直接拼接参数跳转到对应页面就行：

// 比如选中dataset1时
window.location.href = `main.html?dataid=dataset1`;

二、服务端标准方案（友好URL实现） #

你看到的somedomain.com/{dataid}/main.html这种URL，确实是服务端层面处理的，核心是URL重写或者后端路由：

• Nginx/Apache重写规则：把友好URL映射到带查询参数的实际地址，比如Nginx的配置：

  rewrite ^/([^/]+)/main.html$ /main.html?dataid=$1 last;
  rewrite ^/([^/]+)/edit.html$ /edit.html?dataid=$1 last;
  

• 后端路由框架：如果用Node.js（Express）、Python（Flask）等后端，可以直接在路由里捕获dataid，再返回对应的静态页面，比如Express的示例：

  app.get('/:dataid/:page', (req, res) => {
    const { dataid, page } = req.params;
    // 可以把dataid通过模板注入页面，或者让前端从URL路径提取
    res.sendFile(`${page}.html`, { root: './public' });
  });
  

服务端方案的优势是URL更美观，同时天然支持多标签页独立使用不同dataid的需求。

三、单页应用（SPA）是否更合适？ #

SPA确实能更轻松实现这个需求：

• SPA只有一个入口HTML，所有页面切换都是前端路由，dataid可以直接放在路由路径里（比如/main/dataset1）
• 所有组件都能直接读取路由里的dataid，不需要跨页面传递参数
• 每个标签页的路由独立，天然满足多标签用不同dataid的要求
  但如果你的网站已经是现成的3页静态站，改造成SPA需要额外的工作量（比如引入Vue/React或者手写前端路由），自用小项目的话，短期客户端方案完全够用，没必要重构。

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