js 使用 sessionStorage 实现两个页面相互跳转且不丢失之前网页填写的信息

最新推荐文章于 2024-05-24 14:00:17 发布

霜序0.2℃

最新推荐文章于 2024-05-24 14:00:17 发布

阅读量2.5k

点赞数 1

分类专栏：前端文章标签： sessionStorage HTML5 数据传递前端开发页面交互

本文链接：https://blog.csdn.net/Dueser/article/details/120797756

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用了sessionStorage技术,类比cookie和localStorage:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<form method="post">
    <label for="msg">请输入姓名:</label><input type="text" id="msg">
    <input type="button" id="btn" value="下一页" onclick="next()">
</form>

<script>
    window.onload = function () {
        let msg = sessionStorage.getItem("msg");
	    let toMsg = document.getElementById("msg");
        toMsg.value = msg;
    }
	function next() {
		let msg = document.getElementById("msg");
		sessionStorage.setItem("msg", msg.value);
		window.location.href = "register2.html";
	}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册2</title>
</head>
<body>
<form method="post">
    <label for="msg2">请输入性别:</label><input type="text" id="msg2">
    <input type="button" id="btn" value="下一页" onclick="last()">
</form>

<script>
	window.onload = function () {
		let msg2 = sessionStorage.getItem("msg2");
		let toMsg = document.getElementById("msg2");
		toMsg.value = msg2;
	}
	function last() {
		let msg2 = document.getElementById("msg2");
		sessionStorage.setItem("msg2", msg2.value);
		window.location.href = "register.html";
	}
</script>
</body>
</html>