Web前端实现界面间传值的几种方式
在一个web项目中，会有大量的界面。有很多功能是必须要向后台发送请求才能实现的，而界面间传值可以减少不必要的、重复的发送请求操作，从而减轻后台的负担。
第一种方式：利用缓存(cookie)
假如有A, B 两个界面，要把A的值传给B
首先两个界面中都得引入cookie的原生JS。我直接用网页的了。
1
A页的代码
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
localStorage.setItem('the_cookie','value');
//console.log(localStorage.getItem('the_cookie'));
});
function f1(){
var w = document.getElementById("n1").value;
var e = document.getElementById("s1").value;
localStorage.setItem("name",w);
localStorage.setItem("password",e);
}
</script>
</head>
<body>
<form>
<p>name:</p>
<input id="n1" name="name" type="text" value=""/>
<p>password:</p>
<input id="s1" name="password" type="password" value=""><br>
<input name="button" type="button" value="Register" οnclick="f1()" >
<a href="word.html">点击返回登录</a>
</form>
</body>
</html>
然后在B页的JS中接收一下就行了
$(function(){
var yy = localStorage.getItem("name");
var xx = localStorage.getItem("password");
console.log("用户名"+yy);
console.log("密码"+xx);
});
第二种方法：利用url参数传递
A界面，发送数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form name="frm" method="get" action="my_index.html" οnsubmit="return foo()">
<input name="id" value="" index="haha" />
<input type="submit" />
</form>
<script type="text/javascript">
function foo(){
return true;
}
</script>
</body>
</html>
