代码编织梦想

先看效果 

 

 目前常用的有三种办法

session传递,cookie传递,url传递

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

使用url:

 

下面依次介绍


一.session传递

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML1</title>
</head>
<body>
    <h1>Welcome to HTML1!</h1>
    <form method="post" action="receive.html">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="Submit">
    </form>
    <script>
        // 获取表单元素和输入框元素
        const form = document.querySelector('form');
        const input = document.querySelector('#name');
        // 在表单提交时将数据保存到sessionStorage中
        form.addEventListener('submit', (event) => {
            event.preventDefault();
            sessionStorage.setItem('name', input.value);
            form.submit();
        });
    </script>
</body>
</html>

receive.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML2</title>
</head>
<body>
    <h1>Welcome to HTML2!</h1>
    <p>Name: <span id="name"></span></p>
    <script>
        // 获取session中的数据
        const name = sessionStorage.getItem('name');
        // 将数据渲染到页面上
        document.getElementById('name').textContent = name;
    </script>
</body>
</html>

案例说明: 

  1. 在HTML1中,我们使用form标签将数据提交到HTML2页面,并设置methodpostaction为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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML1</title>
</head>
<body>
    <h1>Welcome to HTML1!</h1>
    <form method="post" action="receive.html">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="Submit">
    </form>
    <script>
        // 获取表单元素和输入框元素
        const form = document.querySelector('form');
        const input = document.querySelector('#name');

        // 在表单提交时将数据保存到cookie中
        form.addEventListener('submit', (event) => {
            event.preventDefault();
            document.cookie = `name=${input.value}`;
            form.submit();
        });
    </script>
</body>
</html>

receive.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML2</title>
</head>
<body>
    <h1>Welcome to HTML2!</h1>
    <p>Name: <span id="name"></span></p>
    <script>
        // 获取cookie中的数据
        const cookies = document.cookie.split(';');
        let name = '';
        for (let cookie of cookies) {
            cookie = cookie.trim();
            if (cookie.startsWith('name=')) {
                name = cookie.substring(5);
                break;
            }
        }
        // 将数据渲染到页面上
        document.getElementById('name').textContent = name;
    </script>
</body>
</html>

案例解释:

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

 三.url传输

 index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML1</title>
</head>
<body>
    <h1>Welcome to HTML1!</h1>
    <form method="get" action="receive.html">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="Submit">
    </form>
    <script>
        // 获取表单元素和输入框元素
        const form = document.querySelector('form');
        const input = document.querySelector('#name');

        // 在表单提交时将数据拼接到URL中
        form.addEventListener('submit', (event) => {
            event.preventDefault();
            const url = new URL(form.action);
            url.searchParams.set('name', input.value);
            window.location.href = url.toString();
        });
    </script>
</body>
</html>

receive.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML2</title>
</head>
<body>
    <h1>Welcome to HTML2!</h1>
    <p>Name: <span id="name"></span></p>
    <script>
        // 获取URL中的参数
        const params = new URLSearchParams(window.location.search);
        const name = params.get('name');
        // 将数据渲染到页面上
        document.getElementById('name').textContent = name;
    </script>
</body>
</html>

 

 

案例解释:

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

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/long_songs/article/details/129833003

前端HTML万字血书大总结,来看看你入门了吗?-爱代码爱编程

一、认识WEB 1. 1、 认识网页     网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。 1.2、浏览器     浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。     可能你

2022年最新前端面试题(大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪)-爱代码爱编程

HTML和Css部分 1、对BFC规范(块级格式化上下文)的理解 BFC 块级格式化上下文 一块独立的区域,有自己的规则,bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境,保护其中内部元素不受外部影响,也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为vi

前端基础CSS+html篇 2w字吐血总结-爱代码爱编程

前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲,前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,处理视觉和交互问题。从广义上来讲,所有用户终端产品与视觉和交互有关的部分,都是前端工程师的专业领域。 当然这是百度百科的介绍,实际上前端的技术栈远比

Webpack从入门到进阶(三)---附沿路学习案例代码-爱代码爱编程

文章目录 Webpack从入门到进阶(三)---附沿路学习案例代码一、Webpack简介1、前端发展的几个阶段2、前端三个框架的脚手架3、Webpack是什么?4、webpack和vite5、vue-cli-service运行过程6、Webpack的官方文档7、Webpack的依赖和安装8、webpack默认打包9、Webpack配置文件10、We

HTML标签重点总结+案例-爱代码爱编程

文章目录 1. HTML 语法规范1.1 基本语法概述1.2 标签关系2. HTML基本结构标签2.1 第一个HTML网页2.2 基本结构标签总结3. 网页开发工具3.1 文档类型声明标签3.2 lang语言种类3.3 字符集4. HTML常用标签4.1 标签语义4.2 标题标签h1-h64.3 段落和换行标签4.4 文本格式化标签4.5 div和

html页面跳转页面及参数传递你了解多少?_z_星河的博客-爱代码爱编程

提示:页面跳转传参有多种方式,本文讲解内容为html跳转传参 目录 一、页面跳转 二、页面跳转并传参 1.跳转前页面 2.接收页面 总结 一、页面跳转 超链接跳转 <a href="../html/active_three.html" class="txt">查看更多</a&

前端数据可视化入门_barnett_y的博客-爱代码爱编程

这是一篇给大家提供数据可视化开发的入门指南,介绍了可视化要解决的问题和可以直接使用的工具,我将从下面几个方面给大家介绍,同时以阿里/蚂蚁的可视化团队和资源举例说明: 什么是数据可视化? 怎样进行数据可视化? 数据可视化的场景和工具 数据可视化过程中常见的问题 什么是数据可视化 数据可视化研究的是,如何将数据转化成为交互的图形或图像等

【前端】html标签(下)_html表头为什么在表格的最下面-爱代码爱编程

🔥 信仰:一个人走得远了,就会忘记自己为了什么而出发,希望你可以不忘初心,不要随波逐流,一直走下去 🦋 欢迎关注🖱点赞👍收藏🌟留言🐾 🦄 本文由 程序喵正在路上 原创,CSDN首发! 💖 系列专栏:HTML5+CSS3

前端学习笔记005:数据传输 + ajax + axios_json 豹纹-爱代码爱编程

本文要学习的东西又多又杂,包含 JSON、XML、HTTP 协议、AJAX 请求、Promise、axios。(大家也可以看到我已经努力把题目缩到最短了(T_T))但这些知识对后面前端框架的学习是很有帮助的,所以马上开始~ 目录 1. 开始之前 2. 数据传输:数据 2.1 XML 简介 2.2 XML 语法 2.3 JSON 简介 2.4