使用sessionStorage新建与本页面一样的Tab页面，并在页间传递参数。

最新推荐文章于 2024-04-22 16:57:28 发布

Knight_Ren

最新推荐文章于 2024-04-22 16:57:28 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/Knight_Ren/article/details/97661229

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种利用sessionStorage实现跨Tab页数据同步的方法，通过在页面加载时读取和点击链接时写入sessionStorage，使新打开的Tab页能继承原页面的输入值，适用于需要在多个页面间保持状态一致性的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

客户提了个需求，点击某个链接，新建一个Tab页，当前页面内容不变，新的Tab页中控件的值和当前页一致。

查阅了相关博客，发现可以用sessionStorage或者localStorage实现，键值对属性的存储，获取。

Demo实现思路：页面加载时使用sessionStorage的getItem（）方法取值，在点击跳转的时候给sessionStorage存值。

一下时Demo代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	</head>
	<body >
		name:<input id="name" type="text" />
		<br />
		pass:<input id="pass" type="text" />
		<br />
		<a href="index.html" style="text-decoration:none" target="_blank" onclick="change()" >张三</a>
	</body>
	<script>
		//页面加载时取值
		$().ready(function(){
			var name = document.getElementById("name");
			if(name){
				name.value = window.sessionStorage.getItem("name");
			}		
		});
	//点击链接时跳转并保存当前页面中控件的值。
	var change = function(){
		window.sessionStorage.setItem("name",document.getElementById("name").value);
	}
		
	var test = function(){
        alert("tuichu");
    }
window.onbeforeunload = function () {
   //关闭前会执行，但是必须加return任意字符串
    //页面刷新或者关闭时清空缓存。
 	window.sessionStorage.clear();
}; 
	</script>
	
</html>