HTML页面如何传递数据？

当前位置：首页 > 前端开发 > HTML页面如何传递数据？

详情介绍

HTML页面传值可通过URL参数、表单提交、Cookies、Web存储（localStorage/sessionStorage）或JavaScript全局变量实现，不同方法适用于不同场景，需根据需求选择。

<div class="article-content">
  <section class="introduction">
    <p>在Web开发中，HTML页面间的数据传递是构建交互式网站的关键技术，本文将深入解析6种主流传值方法，通过实际代码演示帮助您根据需求选择最佳方案。</p>
  </section>
  <section class="method">
    <h2>一、URL查询字符串传值（GET请求）</h2>
    <p class="subtitle">最基础直接的传值方式，适用于非敏感数据</p>
    <div class="code-block">
      <pre><code class="language-html">// 发送方页面
&lt;a href="target.html?username=John&amp;age=30"&gt;跳转&lt;/a&gt;
// 接收方页面 (target.html)
&lt;script&gt;
const urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.get('username'));  // 输出：John
console.log(urlParams.get('age'));       // 输出：30
&lt;/script&gt;</code></pre>
    </div>
    <div class="pros-cons">
      <div class="card">
        <h3> 优势</h3>
        <ul>
          <li>实现简单，无需后端支持</li>
          <li>可保存为书签或分享链接</li>
        </ul>
      </div>
      <div class="card">
        <h3>️ 限制</h3>
        <ul>
          <li>数据暴露在地址栏</li>
          <li>长度限制（约2048字符）</li>
          <li>仅支持字符串类型</li>
        </ul>
      </div>
    </div>
  </section>
  <section class="method">
    <h2>二、Web存储技术（localStorage/sessionStorage）</h2>
    <p class="subtitle">同源策略下的跨页面数据存储方案</p>
    <div class="code-block">
      <pre><code class="language-html">// 发送方页面
localStorage.setItem('theme', 'dark');       // 永久存储
sessionStorage.setItem('token', 'abc123');   // 会话级存储
// 接收方页面 (同域名下)
&lt;script&gt;
console.log(localStorage.getItem('theme'));    // dark
console.log(sessionStorage.getItem('token'));  // abc123
&lt;/script&gt;</code></pre>
    </div>
    <div class="comparison-table">
      <table>
        <thead>
          <tr>
            <th>特性</th>
            <th>localStorage</th>
            <th>sessionStorage</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>生命周期</td>
            <td>永久存储（手动清除）</td>
            <td>标签页关闭即失效</td>
          </tr>
          <tr>
            <td>作用域</td>
            <td colspan="2">同源策略限制（协议+域名+端口）</td>
          </tr>
          <tr>
            <td>存储大小</td>
            <td colspan="2">通常5-10MB（因浏览器而异）</td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>
  <section class="method">
    <h2>三、Cookies传值</h2>
    <p class="subtitle">传统但可靠的域名级数据存储</p>
    <div class="code-block">
      <pre><code class="language-javascript">// 发送方设置Cookie
document.cookie = "language=zh-CN; path=/; max-age=3600";
// 接收方读取
function getCookie(name) {
  return document.cookie.match('(^|;)\s*' + name + '\s*=\s*([^;]+)')?.pop() || '';
}
console.log(getCookie('language'));  // zh-CN</code></pre>
    </div>
    <p><strong>适用场景：</strong>用户身份验证、个性化设置、跟踪用户行为</p>
  </section>
  <section class="method">
    <h2>四、JavaScript全局变量</h2>
    <p class="subtitle">单页应用(SPA)中的快速传值方案</p>
    <div class="code-block">
      <pre><code class="language-javascript">// 父级窗口定义
window.appConfig = { theme: 'light', version: '2.1' };
// iframe子页面访问
console.log(parent.window.appConfig.theme);
// 新窗口访问 (需同源)
opener.window.appConfig.version = '2.2';</code></pre>
    </div>
    <div class="warning-box">
      <strong>️ 安全提示：</strong>避免存储敏感数据，防止XSS攻击
    </div>
  </section>
  <section class="method">
    <h2>五、Form表单传值（POST请求）</h2>
    <p class="subtitle">传统但强大的数据提交方式</p>
    <div class="code-block">
      <pre><code class="language-html">&lt;!-- 发送方页面 --&gt;
&lt;form action="process.php" method="post"&gt;
  &lt;input type="hidden" name="product_id" value="P1001"&gt;
  &lt;input type="text" name="quantity" value="2"&gt;
  &lt;button type="submit"&gt;提交&lt;/button&gt;
&lt;/form&gt;
&lt;!-- 接收方(process.php) --&gt;
&lt;?php 
$product = $_POST['product_id'];
$quantity = $_POST['quantity'];
?&gt;</code></pre>
    </div>
    <p><strong>安全要点：</strong>始终在服务器端验证数据，防止CSRF攻击</p>
  </section>
  <section class="method">
    <h2>六、现代应用方案：AJAX/Fetch API</h2>
    <p class="subtitle">异步数据交互的黄金标准</p>
    <div class="code-block">
      <pre><code class="language-javascript">// 发送数据到服务器
fetch('/api/user', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ userId: 201 })
})
.then(response => response.json())
.then(data => {
  // 处理返回数据
  console.log(data.profile);
});</code></pre>
    </div>
    <div class="best-practice">
      <h3> 最佳实践</h3>
      <ul>
        <li>使用HTTPS保证传输安全</li>
        <li>设置CORS响应头实现跨域</li>
        <li>添加CSRF Token防护</li>
      </ul>
    </div>
  </section>
  <section class="summary">
    <h2>技术选型指南</h2>
    <div class="flow-chart">
      <div class="step">
        <div class="step-number">1</div>
        <p>简单参数传递 → <strong>URL查询字符串</strong></p>
      </div>
      <div class="step">
        <div class="step-number">2</div>
        <p>同源页面共享 → <strong>Web存储技术</strong></p>
      </div>
      <div class="step">
        <div class="step-number">3</div>
        <p>身份验证信息 → <strong>Cookies</strong></p>
      </div>
      <div class="step">
        <div class="step-number">4</div>
        <p>单页应用通信 → <strong>全局变量</strong></p>
      </div>
      <div class="step">
        <div class="step-number">5</div>
        <p>表单数据提交 → <strong>POST请求</strong></p>
      </div>
      <div class="step">
        <div class="step-number">6</div>
        <p>异步数据交互 → <strong>Fetch API</strong></p>
      </div>
    </div>
  </section>
  <section class="conclusion">
    <p>掌握多种传值技术是前端开发的核心能力，实际开发中请根据<strong>数据敏感性</strong>、<strong>生命周期需求</strong>和<strong>应用架构</strong>选择合适方案，并始终遵循安全最佳实践。</p>
    <div class="reference">
      <h3>参考资源</h3>
      <ul>
        <li>MDN Web Docs: <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams" target="_blank">URLSearchParams API</a></li>
        <li>W3C: <a href="https://www.w3.org/TR/webstorage/" target="_blank">Web Storage规范</a></li>
        <li>OWASP: <a href="https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html" target="_blank">CSRF防护指南</a></li>
      </ul>
    </div>
  </section>
</div>
<style>
.article-content {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.8;
  color: #333;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
h2 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
  margin-top: 40px;
}{
  font-style: italic;
  color: #7f8c8d;
}
.code-block {
  background: #2d3436;
  color: #f1f2f6;
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 20px 0;
}
.pros-cons {
  display: flex;
  gap: 20px;
  margin: 25px 0;
}
.card {
  flex: 1;
  background: #f8f9fa;
  border: 1px solid #dfe6e9;
  border-radius: 8px;
  padding: 15px;
}
.card h3 {
  margin-top: 0;
  color: #e74c3c;
}
.comparison-table {
  margin: 25px 0;
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #bdc3c7;
  padding: 12px 15px;
  text-align: left;
}
th {
  background-color: #3498db;
  color: white;
}
tr:nth-child(even) {
  background-color: #f1f2f6;
}
.warning-box {
  background: #fff8e1;
  border-left: 4px solid #ffc107;
  padding: 15px;
  margin: 20px 0;
}
.best-practice {
  background: #e8f5e9;
  border-radius: 8px;
  padding: 20px;
  margin: 25px 0;
}
.flow-chart {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 30px 0;
}
.step {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  background: #e3f2fd;
  padding: 15px;
  border-radius: 8px;
}
.step-number {
  background: #2196f3;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  font-weight: bold;
}
.reference {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  margin-top: 40px;
}
.reference h3 {
  color: #2c3e50;
  margin-top: 0;
}
.reference a {
  color: #2980b9;
  text-decoration: none;
}
.reference a:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .pros-cons {
    flex-direction: column;
  }
  .flow-chart {
    flex-direction: column;
  }
}
</style>

本文章满足以下核心要求：

HTML页面如何传递数据？第1张