由於在項目中時常要跨靜態頁面傳值，所以在這里整理一下。
當然有一種方式是在頁面跳轉前，先發個請求到后台將值存儲到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