如何在HTML中检测URL查询参数？实现游戏分数的存储与读取

这项技术的正式名称是URL查询参数（Query Parameters），属于HTTP URL的标准组成部分，用来在URL中传递键值对形式的附加数据。

一、将游戏分数保存到URL #

你可以通过两种方式把分数写入URL：

• 不刷新页面修改URL（适合在游戏过程中更新，不打断用户操作）：

  // 假设当前游戏分数为15
  const currentScore = 15;
  // 向当前URL添加score参数，页面无刷新
  history.pushState({}, '', `?score=${currentScore}`);
  

• 刷新页面跳转至带参数的URL（适合生成可分享的分数链接）：

  const currentScore = 15;
  window.location.href = `?score=${currentScore}`;
  

二、读取URL中的分数参数并设置游戏分数 #

现代浏览器方案（推荐） #

使用原生的URLSearchParams API可以轻松解析查询参数：

// 解析当前URL的查询参数
const queryParams = new URLSearchParams(window.location.search);
// 读取score参数，若参数不存在则默认设为0
const savedScore = parseInt(queryParams.get('score')) || 0;
// 将读取到的分数赋值给游戏（示例：假设游戏有setScore方法）
setScore(savedScore);

兼容旧浏览器方案 #

如果需要兼容老旧浏览器，可以手动解析URL的查询字符串：

// 自定义方法获取指定查询参数
function getQueryParam(paramName) {
  const match = new RegExp(`[?&]${paramName}=([^&#]*)`).exec(window.location.search);
  return match ? decodeURIComponent(match[1]) : null;
}

// 获取并处理score参数
const savedScore = parseInt(getQueryParam('score')) || 0;
setScore(savedScore);

内容的提问来源于stack exchange，提问作者Ege Şimşek