html静态页⾯传值的⼏种⽅法
由于在项⽬中时常要跨静态页⾯传值，所以在这⾥整理⼀下。
当然有⼀种⽅式是在页⾯跳转前，先发个请求到后台将值存储到session中，跳转后再发个请求到后台取出。这种⽅式不仅仅慢⽽且还特别耗费资源。
以下有其他的⼏种⽅式：
⽅式1：使⽤拼接地址的⽅法。就是在跳转地址后⾯拼接参数。如下：
post1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>静态⽹页传值(post)1</title>
<script>
function click1(){
var name = ElementById("name").value);    //escape⽅法是改变编码
var pwd = ElementById("pwd").value);
var url = "get1.html?"  + "name=" + name + "&pwd=" + pwd ; //进⾏拼接传值
location.href=url;
}
</script>
</head>
<body>
名字：<input type="text" id="name"/>
密码：<input type="text" id="pwd"/>
<input type="button"  onclick="click1()" value="提交："/>
</body>
</html>
get1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>静态⽹页传值(get)1</title>
<script>
function click1(){
var url = location.search; //这⼀条语句获取了包括问号开始到参数的最后，不包括前⾯的路径
var params = url.substr(1);//去掉问号
var pa = params.split("&");
var s = new Object();
for(var i = 0; i < pa.length; i ++){
s[pa[i].split("=")[0]] = unescape(pa[i].split("=")[1]);
}
}
/
*
这种传值的⽅式很⽅便，⽽且简单有效，但是缺点是受到url长度的限制，由于每个浏览器对url长度的限制不同，这⾥不好给出⼀个确定的限制，
只知道这个传值传的数据量不能太⼤。
*/
</script>
</head>
<body>
名字：<input type="text" id="name"/>
密码：<input type="text" id="pwd"/>
<input type="button"  onclick="click1()" value="获取："/>
</body>
</html>
这种⽅法简单有效，但是数据量有限制
⽅式2：使⽤本地存储的cookie
post2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>post2</title>
<script>
function click1(){
var name = ElementById("name").value;
var pwd = ElementById("pwd").value;
location.href="get2.html";
}
/*
关于cookie，要特别处理传过来的字符串，其次，还有些浏览器不⽀持cookie的，但⽬前来说，⼀般浏览器都⽀持cookie
*/
</script>
</head>
<body>
名字：<input type="text" id="name"/>
密码：<input type="text" id="pwd"/>
<input type="button"  onclick="click1()" value="提交："/>
</body>
</html>
get2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>get2</title>
<script>
function click1(){
var params= kie;
var pa = params.split("&");
var s = new Object();
for(var i = 0; i < pa.length; i ++){
s[pa[i].split(":")[0]] = pa[i].split(":")[1];
html href属性}
}
</script>
</head>
<body>
名字：<input type="text" id="name"/>
密码：<input type="text" id="pwd"/>
<input type="button"  onclick="click1()" value="获取："/>
</body>
</html>
关于cookie就是要注意有些浏览器是不⽀持的，同时还需要注意cookie的时效的问题，cookie是可以设置失效时间的。关于cookie的解析也要注意⼀下
⽅法3：localStorage
post3.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>post3</title>
<script>
function click1(){
var name = ElementById("name").value;
var pwd = ElementById("pwd").value;
localStorage.setItem("name",name);
localStorage.setItem("pwd",pwd);
location.href="get3.html";
}
</script>
</head>
<body>
名字：<input type="text" id="name"/>
密码：<input type="text" id="pwd"/>
<input type="button"  onclick="click1()" value="提交："/>
</body>
</html>
get3.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>get3</title>
<script>
function click1(){
}
/*
⽅便简单，但是要考虑浏览器的版本⽀持
*/
</script>
</head>
<body>
名字：<input type="text" id="name"/>
密码：<input type="text" id="pwd"/>
<input type="button"  onclick="click1()" value="获取："/>
</body>
</html>
这种⽅法简单有效，同时还不需要字符串解析。⾮常的有意思。但是要注意浏览器的版本⽀持，所以在使⽤前请判断是否⽀持。分享结束，欢迎评论
2020/2/19补充：
关于静态页⾯传值的⽅法⼀，这⾥做⼏点补充说明：
  上述的⽅法1是⼀种从地址栏获取参数的⼿段，但是还有其他的⼿段。如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>post4</title>
<script>
function click1(){
var name = ElementById("name").value;
var pwd = ElementById("pwd").value;
//如果这⾥传了中⽂，⽽且传的时候没有编码，怎么办？get页⾯接收的时候会乱码的。如何处理？详见get4.html
//注意：这⾥拼接的是⽤#号
location.href="get4.html#name=" + name + "&pwd=" + pwd;
}
</script>
</head>
<body>
名字：<input type="text" id="name"/>
密码：<input type="text" id="pwd"/>
<input type="button"  onclick="click1()" value="提交："/>
</body>
</html>
get4.html如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>get4</title>
<script>
function click1(){
var data = location.hash; //location.hash获取的是#号开始的所有字符串，包括#号，hash 属性是⼀个可读可写的字符串，      //该字符串是 URL 的锚部分（从 # 号开始的部分）。
//如果传过来的是中⽂不经过编码的话，这⾥就会出现乱码。如何解决？如下：
data = decodeURI(data);
var str_data = data.split("&");
var name;
var pwd ;
name = str_data[0].split("=")[1];
pwd = str_data[1].split("=")[1];
}
</script>
</head>
<body>
名字：<input type="text" id="name"/>
密码：<input type="text" id="pwd"/>
<input type="button"  onclick="click1()" value="获取："/>
</body>
</html>
如果你对中⽂乱码还是有写疑惑，或者想要更好的解决⽅案，请参考下⾯的博客：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。