使用LocalStorage实现HTML页面间表单数据传递的完整教程

来源：站长平台作者：陈平安时间：05-14

导读：本期聚焦于小伙伴创作的《使用LocalStorage实现HTML页面间表单数据传递的完整教程》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《使用LocalStorage实现HTML页面间表单数据传递的完整教程》有用，将其分享出去将是对创作者最好的鼓励。

HTML页面间数据共享教程：利用LocalStorage传递表单输入值

在开发多页面Web应用时，经常需要在不同页面之间传递数据，比如用户在A页面填写的表单信息，需要在B页面展示或者进一步处理。传统的方式可以通过URL参数传递，但这种方式有长度限制，且不适合传递复杂或敏感的数据。而LocalStorage作为浏览器提供的本地存储方案，能够存储较大容量的字符串数据，且在同一域名下的所有页面都可以访问，非常适合用来实现页面间的数据共享。

本文将通过一个完整的示例，演示如何利用LocalStorage在两个HTML页面之间传递表单输入的值，包含数据写入、读取、清除的完整流程。

一、LocalStorage基础说明

LocalStorage是HTML5引入的客户端存储机制，属于Web Storage API的一部分，它有以下核心特点：

存储的数据没有过期时间，除非手动清除，否则会一直保存在浏览器中
存储容量通常为5MB左右，远大于Cookie的4KB限制
只能存储字符串类型的数据，如果需要存储对象，需要先通过JSON.stringify()转换为字符串，读取时再通过JSON.parse()还原
同一域名下的所有页面都可以读写同一个LocalStorage中的数据

我们主要使用LocalStorage的两个核心方法：

localStorage.setItem(key, value)：向LocalStorage中写入键值对数据，key和value都是字符串
localStorage.getItem(key)：根据key读取对应的value，如果key不存在则返回null
localStorage.removeItem(key)：根据key删除对应的存储项

二、示例场景设计

我们设计两个简单的HTML页面：

第一个页面（form.html）：包含一个表单，用户可以输入姓名、年龄、爱好，点击提交按钮后将表单数据存入LocalStorage，然后跳转到第二个页面
第二个页面（display.html）：页面加载时从LocalStorage中读取之前存储的表单数据，展示在页面上，同时提供清除数据的按钮

三、表单页面（form.html）实现

这个页面的核心逻辑是：监听表单的提交事件，阻止默认的表单提交行为，收集所有表单输入的值，拼接成对象后转换为字符串存入LocalStorage，最后跳转到展示页面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单填写页面</title>
  <style>
    .form-container {
      width: 400px;
      margin: 50px auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
    .form-item {
      margin-bottom: 15px;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    input, textarea {
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    button {
      width: 100%;
      padding: 10px;
      background-color: #409eff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    button:hover {
      background-color: #337ecc;
    }
  </style>
</head>
<body>
  <div class="form-container">
    <h2>请填写个人信息</h2>
    <form id="userForm">
      <div class="form-item">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" placeholder="请输入姓名" required>
      </div>
      <div class="form-item">
        <label for="age">年龄：</label>
        <input type="number" id="age" name="age" placeholder="请输入年龄" required>
      </div>
      <div class="form-item">
        <label for="hobby">爱好：</label>
        <textarea id="hobby" name="hobby" placeholder="请输入你的爱好，多个爱好用逗号分隔" rows="3"></textarea>
      </div>
      <button type="submit">提交并跳转</button>
    </form>
  </div>

  <script>
    // 获取表单元素
    const form = document.getElementById('userForm');
    // 监听表单提交事件
    form.addEventListener('submit', function(e) {
      // 阻止表单默认提交行为，避免页面刷新
      e.preventDefault();
      
      // 收集表单数据
      const formData = {
        name: document.getElementById('name').value,
        age: document.getElementById('age').value,
        hobby: document.getElementById('hobby').value
      };
      
      // 将对象转换为JSON字符串存入LocalStorage，key设为userFormData
      localStorage.setItem('userFormData', JSON.stringify(formData));
      
      // 跳转到展示页面
      window.location.href = 'display.html';
    });
  </script>
</body>
</html>

代码说明：

页面中的表单使用了<input>、<textarea>等标签收集用户输入，设置required属性保证必填项不为空
JavaScript部分首先阻止了表单的默认提交行为，避免页面刷新导致数据丢失
通过DOM操作获取三个输入项的值，组装成对象后使用JSON.stringify()转换为字符串，再通过localStorage.setItem()存入LocalStorage，键名统一为userFormData
最后通过window.location.href跳转到展示页面display.html

四、展示页面（display.html）实现

这个页面的核心逻辑是：页面加载完成后，从LocalStorage中读取键为userFormData的数据，如果存在则解析为对象并展示在页面上，如果不存在则提示用户先填写表单。同时提供清除数据的按钮，点击后删除LocalStorage中的对应数据并刷新页面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据展示页面</title>
  <style>
    .display-container {
      width: 400px;
      margin: 50px auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
    .data-item {
      margin-bottom: 15px;
      padding: 10px;
      background-color: #f5f5f5;
      border-radius: 4px;
    }
    .data-label {
      font-weight: bold;
      color: #333;
    }
    .data-value {
      margin-top: 5px;
      color: #666;
    }
    .empty-tip {
      text-align: center;
      color: #999;
      padding: 20px;
    }
    .btn-group {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }
    button {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    .back-btn {
      background-color: #909399;
      color: white;
    }
    .back-btn:hover {
      background-color: #73767a;
    }
    .clear-btn {
      background-color: #f56c6c;
      color: white;
    }
    .clear-btn:hover {
      background-color: #dd6161;
    }
  </style>
</head>
<body>
  <div class="display-container">
    <h2>个人信息展示</h2>
    <div id="dataContent"></div>
    <div class="btn-group">
      <button class="back-btn" onclick="goBack()">返回填写页面</button>
      <button class="clear-btn" onclick="clearData()">清除存储数据</button>
    </div>
  </div>

  <script>
    // 页面加载完成后执行数据读取逻辑
    window.onload = function() {
      // 从LocalStorage中读取键为userFormData的数据
      const storedData = localStorage.getItem('userFormData');
      const dataContent = document.getElementById('dataContent');
      
      if (storedData) {
        // 如果存在数据，解析JSON字符串为对象
        const formData = JSON.parse(storedData);
        // 拼接展示的HTML内容
        let html = '';
        html += '<div class="data-item">';
        html += '<div class="data-label">姓名：</div>';
        html += '<div class="data-value">' + formData.name + '</div>';
        html += '</div>';
        html += '<div class="data-item">';
        html += '<div class="data-label">年龄：</div>';
        html += '<div class="data-value">' + formData.age + '</div>';
        html += '</div>';
        html += '<div class="data-item">';
        html += '<div class="data-label">爱好：</div>';
        html += '<div class="data-value">' + formData.hobby + '</div>';
        html += '</div>';
        dataContent.innerHTML = html;
      } else {
        // 如果不存在数据，展示提示信息
        dataContent.innerHTML = '<div class="empty-tip">暂无存储的表单数据，请先填写表单</div>';
      }
    };

    // 返回填写页面的函数
    function goBack() {
      window.location.href = 'form.html';
    }

    // 清除LocalStorage数据的函数
    function clearData() {
      // 删除键为userFormData的存储项
      localStorage.removeItem('userFormData');
      // 刷新页面，重新加载数据
      window.location.reload();
    }
  </script>
</body>
</html>

代码说明：

页面加载时通过window.onload执行读取逻辑，使用localStorage.getItem('userFormData')获取存储的数据
如果获取到数据，使用JSON.parse()将字符串还原为对象，然后动态拼接HTML内容展示数据；如果没有获取到数据，则展示提示信息
返回按钮点击后跳转到form.html重新填写表单，清除按钮点击后调用localStorage.removeItem('userFormData')删除存储的数据，再刷新页面更新展示状态

五、使用注意事项

在实际使用LocalStorage传递页面数据时，需要注意以下几点：

LocalStorage只能存储字符串，所以对象、数组等复杂类型必须先序列化再存储，读取时再反序列化
LocalStorage的数据存储在客户端，不要用来存储敏感信息（如密码、token等），避免安全风险
如果存储的数据量较大，或者需要临时存储、页面关闭后自动清除的数据，可以考虑使用SessionStorage，它的生命周期是页面会话级别，关闭页面后数据会自动清除
不同浏览器、不同域名下的LocalStorage是相互隔离的，无法跨域访问
如果需要监听LocalStorage的变化，可以使用window.addEventListener('storage', callback)监听，当其他页面修改了LocalStorage时会触发该事件

六、总结

通过LocalStorage实现HTML页面间的数据共享，是一种简单高效的方案，无需后端参与，适合传递非敏感的临时数据。本文的示例完整演示了从表单数据收集、存储到读取展示的全流程，你可以根据实际需求扩展这个示例，比如增加更多的表单字段、添加数据校验、存储多个不同的表单数据等。只要掌握了LocalStorage的基本读写方法，就可以灵活应用到各种多页面数据传递的场景中。

LocalStorage 页面间数据传递表单数据存储 Web_Storage_API 前端数据共享

免责声明：已尽一切努力确保本网站所含信息的准确性。网站部分内容来源于网络或由用户自行发表，内容观点不代表本站立场。本站是个人网站免费分享，内容仅供个人学习、研究或参考使用，如内容中引用了第三方作品，其版权归原作者所有。若内容触犯了您的权益，请联系我们进行处理。