当前位置：首页 > 前端开发 > 正文

静态HTML页面如何传值？

admin
前端开发
2025-07-07
3024

静态HTML页面传值可通过URL参数、本地存储（localStorage/sessionStorage）、Cookie或隐藏表单域实现，这些方法在页面跳转或刷新时保持数据传递，无需服务器交互。

在静态HTML页面中传递数据是常见需求，尽管这类页面无法使用服务器端处理（如PHP或Python），但通过前端技术仍能实现高效传值，以下是六种实用方法,附带代码示例和适用场景分析：

URL查询参数（Query String）

原理：通过URL的后添加键值对传递数据，页面加载时用JavaScript解析。
示例代码：

<!-- 传递页面：跳转时附加参数 -->
<a href="receive.html?username=John&age=30">跳转</a>
<!-- receive.html 中解析 -->
<script>
  const params = new URLSearchParams(window.location.search);
  console.log(params.get('username')); // 输出 "John"
</script>

优点：简单通用，支持页面刷新保留数据。
缺点：数据暴露在地址栏，长度受限（约2000字符）。
适用场景：分享链接、分页参数等非敏感数据。

Web Storage（localStorage/sessionStorage）

原理：利用浏览器本地存储，数据在页面间共享。
示例代码：

<!-- 发送页面 -->
<script>
  localStorage.setItem('theme', 'dark'); // 长期存储
  sessionStorage.setItem('token', 'abc123'); // 会话级存储
</script>
<!-- 接收页面 -->
<script>
  console.log(localStorage.getItem('theme')); // 输出 "dark"
</script>

优点：存储空间大（5-10MB），无请求开销。
缺点：同源策略限制，需手动清理旧数据。
适用场景：用户偏好设置、购物车暂存等。

静态HTML页面如何传值？第1张

Cookies

原理：通过浏览器自动携带的小型文本传值。
示例代码：

// 发送页面：设置Cookie
document.cookie = "language=en; path=/; max-age=3600"; // 有效期1小时
// 接收页面：读取Cookie
const cookies = document.cookie.split(';').reduce((acc, item) => {
  const [key, val] = item.split('=');
  acc[key.trim()] = val;
  return acc;
}, {});
console.log(cookies.language); // 输出 "en"

优点：支持跨子域名，可设置过期时间。
缺点：容量小（4KB），每次HTTP请求都会携带。
适用场景：用户身份验证、追踪会话。

Window对象共享（window.name / window.opener）

原理：通过窗口对象的属性传递数据。
示例代码：

<!-- 父页面打开子页面 -->
<script>
  const child = window.open('child.html');
  child.onload = () => {
    child.window.userData = { id: 1001 }; // 传递数据
  };
</script>
<!-- 子页面 child.html -->
<script>
  console.log(window.userData.id); // 输出 1001
</script>

优点：适合父子页面通信。
缺点：页面关系需明确，不支持跨域。
适用场景：弹窗登录页传参、嵌入式应用。

Hash片段标识符（URL Fragment）

原理：使用URL中后的内容传值，通过hashchange事件监听。
示例代码：

<!-- 发送页面 -->
<a href="profile.html#section=notifications">通知设置</a>
<!-- profile.html -->
<script>
  window.addEventListener('hashchange', () => {
    const section = location.hash.split('=')[1]; // 获取 "notifications"
  });
</script>

优点：不触发页面刷新，兼容性好。
缺点：数据长度受限，需手动解析。
适用场景：单页面应用（SPA）路由、锚点跳转。

隐藏表单域（Hidden Input Fields）

原理：用表单隐藏域存储数据，提交后跳转页面。
示例代码：

<!-- 发送页面 -->
<form action="result.html" method="GET">
  <input type="hidden" name="product_id" value="P1005">
  <button type="submit">查看详情</button>
</form>
<!-- result.html 通过URL参数接收（同方法一） -->

优点：兼容所有浏览器，支持复杂数据。
缺点：需表单提交动作，数据可能暴露在URL中。
适用场景：多步骤表单、数据提交到新页面。