您现在的位置是：首页 > 技术教程 正文

前端HTML网页之间传递数据多种办法，附代码案例

admin 阅读： 2024-03-28
后台-插件-广告管理-内容页头部广告（手机）

先看效果 

 

 目前常用的有三种办法

session传递，cookie传递，url传递

url会暴露参数，其余的两个是保存在服务端和浏览器中，不会暴露在地址栏里面

使用url：

 

下面依次介绍

一.session传递

index.html

  1. html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML1title>
  6. head>
  7. <body>
  8. <h1>Welcome to HTML1!h1>
  9. <form method="post" action="receive.html">
  10. <label for="name">Name:label>
  11. <input type="text" id="name" name="name">
  12. <input type="submit" value="Submit">
  13. form>
  14. <script>
  15. // 获取表单元素和输入框元素
  16. const form = document.querySelector('form');
  17. const input = document.querySelector('#name');
  18. // 在表单提交时将数据保存到sessionStorage中
  19. form.addEventListener('submit', (event) => {
  20. event.preventDefault();
  21. sessionStorage.setItem('name', input.value);
  22. form.submit();
  23. });
  24. script>
  25. body>
  26. html>

receive.html 

  1. html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML2title>
  6. head>
  7. <body>
  8. <h1>Welcome to HTML2!h1>
  9. <p>Name: <span id="name">span>p>
  10. <script>
  11. // 获取session中的数据
  12. const name = sessionStorage.getItem('name');
  13. // 将数据渲染到页面上
  14. document.getElementById('name').textContent = name;
  15. script>
  16. body>
  17. html>

案例说明： 

  1. 在HTML1中，我们使用form标签将数据提交到HTML2页面，并设置method为post，action为HTML2的文件路径。
  2. 在HTML2中，我们使用JavaScript获取session中的数据，然后将数据渲染到页面上。我们可以使用sessionStorage对象来存储数据，它可以在不同的页面之间共享数据。在这里，我们存储了用户输入的姓名，并在HTML2中获取并渲染了这个数据。

 

如果传递失败，检查一下以下问题：

  1. HTML1文件中的表单action属性设置错误，导致数据无法传递到HTML2页面。在这里，需要确保HTML1中表单的action属性设置为HTML2的文件路径，如action="html2.html"。
  2. HTML2文件中的JavaScript代码没有正确地从sessionStorage中获取数据。需要确保使用正确的key来获取sessionStorage中的数据。在这里，我们使用的key是name，所以需要确保获取数据的代码中使用的也是这个key，如const name = sessionStorage.getItem('name');。
  3. 在本地演示时，需要确保HTML1和HTML2两个文件都在同一个服务器上运行，否则sessionStorage无法正常工作。
  4. 如果使用了浏览器的隐身模式，也可能导致sessionStorage无法正常工作。 如果以上几个原因都不是问题的话，建议检查浏览器的开发者工具中是否有相关的错误信息或警告信息。

 

二.cookie传递

index.html

  1. html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML1title>
  6. head>
  7. <body>
  8. <h1>Welcome to HTML1!h1>
  9. <form method="post" action="receive.html">
  10. <label for="name">Name:label>
  11. <input type="text" id="name" name="name">
  12. <input type="submit" value="Submit">
  13. form>
  14. <script>
  15. // 获取表单元素和输入框元素
  16. const form = document.querySelector('form');
  17. const input = document.querySelector('#name');
  19. // 在表单提交时将数据保存到cookie中
  20. form.addEventListener('submit', (event) => {
  21. event.preventDefault();
  22. document.cookie = `name=${input.value}`;
  23. form.submit();
  24. });
  25. script>
  26. body>
  27. html>

receive.html

  1. html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML2title>
  6. head>
  7. <body>
  8. <h1>Welcome to HTML2!h1>
  9. <p>Name: <span id="name">span>p>
  10. <script>
  11. // 获取cookie中的数据
  12. const cookies = document.cookie.split(';');
  13. let name = '';
  14. for (let cookie of cookies) {
  15. cookie = cookie.trim();
  16. if (cookie.startsWith('name=')) {
  17. name = cookie.substring(5);
  18. break;
  19. }
  20. }
  21. // 将数据渲染到页面上
  22. document.getElementById('name').textContent = name;
  23. script>
  24. body>
  25. html>

案例解释：

  1. 在HTML1中，我们使用form标签将数据提交到HTML2页面，并设置method为post，action为HTML2的文件路径。
  2. 在HTML1中，我们使用JavaScript监听表单的提交事件，在事件处理程序中将数据保存到cookie中，并且在页面跳转之前提交表单。这样，在HTML2中就可以通过cookie获取到数据并渲染了。
  3. 在HTML2中，我们使用JavaScript获取cookie中的数据，并渲染到页面上。我们可以使用document.cookie来访问cookie，它返回一个字符串，包含所有cookie的键值对。在这里，我们遍历这个字符串，找到名为name的cookie，并获取它的值。然后将这个值渲染到页面上。

 三.url传输

 index.html

  1. html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML1title>
  6. head>
  7. <body>
  8. <h1>Welcome to HTML1!h1>
  9. <form method="get" action="receive.html">
  10. <label for="name">Name:label>
  11. <input type="text" id="name" name="name">
  12. <input type="submit" value="Submit">
  13. form>
  14. <script>
  15. // 获取表单元素和输入框元素
  16. const form = document.querySelector('form');
  17. const input = document.querySelector('#name');
  19. // 在表单提交时将数据拼接到URL中
  20. form.addEventListener('submit', (event) => {
  21. event.preventDefault();
  22. const url = new URL(form.action);
  23. url.searchParams.set('name', input.value);
  24. window.location.href = url.toString();
  25. });
  26. script>
  27. body>
  28. html>

receive.html

  1. html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML2title>
  6. head>
  7. <body>
  8. <h1>Welcome to HTML2!h1>
  9. <p>Name: <span id="name">span>p>
  10. <script>
  11. // 获取URL中的参数
  12. const params = new URLSearchParams(window.location.search);
  13. const name = params.get('name');
  14. // 将数据渲染到页面上
  15. document.getElementById('name').textContent = name;
  16. script>
  17. body>
  18. html>

 

 

案例解释：

  1. 在HTML1中，我们使用form标签将数据提交到HTML2页面，并设置method为get，action为HTML2的文件路径。
  2. 在HTML1中，我们使用JavaScript监听表单的提交事件，在事件处理程序中将数据拼接到URL中，并跳转到这个URL。这样，在HTML2中就可以通过URL获取到数据并渲染了。
  3. 在HTML2中，我们使用JavaScript获取URL中的参数，并渲染到页面上。我们可以使用URLSearchParams来访问URL中的参数，它提供了一些实用的方法，如get()、set()等。在这里，我们获取名为name的参数，并将它渲染到页面上。

 

标签:
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿 站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）
相关文章
关注我们

扫一扫关注我们，了解最新精彩内容

搜索
排行榜
最近发表
标签列表