html静态页面传值的几种方法
由于在项目中时常要跨静态页面传值，所以在这里整理一下。
当然有一种方式是在页面跳转前，先发个请求到后台将值存储到session中，跳转后再发个请求到后台取出。这种方式不仅仅慢而且还特别耗费资源。
以下有其他的几种方式：
方式1：使用拼接地址的方法。就是在跳转地址后面拼接参数。如下：
post1.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>静态网页传值(post)1</title> <script> function click1(){ var name = escape(document.getElementById("name").value); //escape方法是改变编码 var pwd = escape(document.getElementById("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]); } document.getElementById("name").value =s.name; document.getElementById("pwd").value = s.pwd; } /* 这种传值的方式很方便，而且简单有效，但是缺点是受到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 = document.getElementById("name").value; var pwd = document.getElementById("pwd").value; document.cookie = "name:" + name + "&pwd:" + pwd; 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= document.cookie; 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]; } document.getElementById("name").value =s.name; document.getElementById("pwd").value = s.pwd; } </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 = document.getElementById("name").value; var pwd = document.getElementById("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(){ document.getElementById("name").value = localStorage.getItem("name"); document.getElementById("pwd").value = localStorage.getItem("pwd"); } /* 方便简单， 但是要考虑浏览器的版本支持 */ </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 = document.getElementById("name").value;
var pwd = document.getElementById("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];
document.getElementById("name").value = name;
document.getElementById("pwd").value = pwd;
}
</script>
</head>
<body>
名字：<input type="text" id="name"/>
密码：<input type="text" id="pwd"/>
<input type="button" onclick="click1()" value="获取："/>
</body>
</html>
如果你对中文乱码还是有写疑惑，或者想要更好的解决方案，请参考下面的博客：
https://www.cnblogs.com/ting1996/p/6897802.html
https://blog.csdn.net/howlaa/article/details/12834595
https://blog.csdn.net/fly_wugui/article/details/81114203
