javascript實現靜態頁面之間的傳值

時間 2019-11-06

原文原文鏈接

靜態頁面之間傳值有多種方法：一、經過url 二、經過cookie 三、window.open傳值四、HTML5 localStorage傳值javascript

方法一：url傳值

主要原理是：經過GET方法而後獲取URL從中解析出傳遞的數據，實現代碼以下:

靜態頁面一：index.htmlhtml

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shopping car</title>
</head>
 
<body>
<form action="Read.html" method="get">
<input type="text" name="username">
<input type="text" name="password">
<input type="submit" value="Post">
</form>
</body>
</html>

靜態頁面二：Read.htmljava

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>huanglw</title>
</head>
 
<body>
 
</body>
<script language="javascript" >
/*
*--------------- Read.htm -----------------
* Request[key]
* 功能:實現ASP的取得URL字符串,Request("AAA")
* 參數:key,字符串.
* 實例:alert(Request["AAA"])
*--------------- Request.htm -----------------
*/
var url=location.search;  //"?username=gdf&password=gfg"
var Request = new Object();
if(url.indexOf("?")!=-1)
{
　　var str = url.substr(1);　//截取?以後的字符串
　　strs= str.split("&");//將字符串以符號"&"分隔成兩段
　　for(var i = 0; i < strs.length; i++)
　　{
　　 　 Request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);//將每一段字符串又以"="分爲兩段
　　}
}
alert(Request["username"])
alert(Request["password"])
</script>
</html>

實現的效果是在index.html輸入username和password以後點擊Post提交按鈕以後將index.html中的兩個參數傳遞到Read.html頁面中，
Read.html中的js代碼獲取參數並作處理彈出兩個彈窗顯示兩個參數markdown

Segmentfault上的第一篇文章，技術含量不高，主要測試是想體驗一下這炫酷markdown編輯器cookie