可在两个HTML页面间通过URL查询参数、localStorage、sessionStorage、表单POST或BroadcastChannel API传递文本框数据:前三种适用于客户端单向跳转传值,第四种需服务端配合,第五种支持同源标签页实时通信。

如果您需要在两个HTML页面之间传递文本框中的数据,则可能是由于页面跳转时未正确保存或携带用户输入的内容。以下是实现此功能的多种方法:
一、使用URL查询参数传递
该方法通过将文本框内容作为URL的查询字符串(query string)附加在目标页面地址后,使目标页面可通过JavaScript解析获取。适用于少量、非敏感的纯文本数据。
1、在源页面中,获取文本框的value值,并拼接到目标URL后。
2、使用encodeURIComponent()对文本内容进行编码,防止特殊字符破坏URL结构。
立即学习“前端免费学习笔记(深入)”;
3、通过window.location.href或标签跳转至带参数的目标页面。
4、在目标页面中,使用URLSearchParams API提取查询参数中的文本值。
5、将提取出的值赋给目标页面的对应文本框元素。
二、使用localStorage临时存储
该方法利用浏览器的localStorage机制,在源页面写入数据,在目标页面读取,不依赖URL长度限制,适合中等长度文本且需跨会话保留的场景。
1、在源页面中,获取文本框内容并调用localStorage.setItem()写入指定键名,如"transferText"。
2、确保键名唯一且无冲突,避免覆盖其他页面存储的数据。
3、执行页面跳转,可使用window.location.assign()或表单提交跳转。
4、在目标页面加载完成后,调用localStorage.getItem()读取对应键名的值。
5、将读取结果设置为目标文本框的value属性,并可选择在读取后立即调用localStorage.removeItem()清除数据。
三、使用sessionStorage实现单次传递
该方法与localStorage类似,但数据仅在当前会话周期内有效,关闭标签页后自动清除,适合严格限定为“一次跳转”场景的数据传递。
1、在源页面中,获取文本框内容并调用sessionStorage.setItem()存入指定键名。
2、注意sessionStorage作用域为当前标签页及由此打开的子窗口,不共享于其他标签页。
3、执行跳转操作,保持会话上下文不中断。
4、在目标页面中,使用sessionStorage.getItem()获取对应键名的值。
5、将值填入目标文本框,并建议在读取后调用sessionStorage.removeItem()释放空间。
四、通过表单POST方式提交
该方法借助HTML表单的method="post"特性,将文本框作为表单字段提交至目标HTML页面,需配合服务端脚本或现代浏览器的POST-redirect-GET模拟方案。
1、将文本框包裹在











