如何用JavaScript在网页间传递工作表编号（无需单独方法）

方案一：URL参数传递（推荐，无状态更可靠） #

这个方案不需要依赖localStorage，直接把工作表编号放到URL的查询参数里，简单直观，而且刷新页面或直接访问目标页时，参数不会丢失，适合大量链接的场景。

修改main.html： #

给每个链接的href添加查询参数，格式为worksheets.html?num=编号：

<html>
<head>
</head>
<body>
<p>Links to worksheets: &nbsp
<a href="worksheets.html?num=1">1 &nbsp
<a href="worksheets.html?num=2">2 &nbsp
<a href="worksheets.html?num=3">3 &nbsp
</body>
</html>

修改worksheets.html： #

读取URL中的查询参数并展示：

<html>
<head>
</head>
<body>
<p id="mainParagraph"></p>

<script>
// 解析URL参数
const urlParams = new URLSearchParams(window.location.search);
const worksheetNum = urlParams.get('num');
// 展示内容，没有参数时显示默认文本
document.getElementById("mainParagraph").innerHTML = "This is worksheet number " + (worksheetNum || "unknown");
</script>
</body>
</html>

方案二：统一事件监听 + localStorage #

如果一定要用localStorage传递，可以通过统一事件监听的方式，不用给每个链接单独写JS代码，维护更高效。

修改main.html： #

给所有链接添加统一的类名和存储编号的data-*属性，然后写一次全局事件监听：

<html>
<head>
</head>
<body>
<p>Links to worksheets: &nbsp
<a href="worksheets.html" class="worksheet-link" data-num="1">1 &nbsp
<a href="worksheets.html" class="worksheet-link" data-num="2">2 &nbsp
<a href="worksheets.html" class="worksheet-link" data-num="3">3 &nbsp

<script>
// 给所有带worksheet-link类的链接绑定点击事件
document.querySelectorAll('.worksheet-link').forEach(link => {
  link.addEventListener('click', function() {
    // 从data-num属性获取编号并存入localStorage
    localStorage.setItem('worksheetNumber', this.dataset.num);
  });
});
</script>
</body>
</html>

worksheets.html无需修改： #

保留你原来读取localStorage的代码即可。

关于内联JS失败的说明 #

如果之前尝试内联JS没成功，大概率是写法问题，正确的内联写法应该是：

<a href="worksheets.html" onclick="localStorage.setItem('worksheetNumber', '1')">1</a>

但这种方式需要给每个链接重复写代码，对于数百个链接来说冗余度太高，完全不推荐。

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