問題

因最近嘗試實現客戶端與服務端分離，服務端只提供介面，客戶端用html+js實現，分成兩個獨立的專案部署，因專案是個人專案，客戶端展示不考慮使用像Angular、Vue、Native這種前端框架實現，於是全部使用靜態頁面實現，請求資料用ajax，在開發的過程中，就遇到了頁面之間傳值的問題。

解決方法

post提交表單跳轉的方式肯定不行了，因服務端並不處理這些請求引數，連到達客戶端的機會都沒有，此時只能考慮get方式了，因get方式引數在url上，跳轉後的頁面肯定能獲取到。還有一種思路，就是將引數存到一個公共的地方，頁面都可以獲取到，按這兩種思路，總結了如下的解決方法。

1、get方式，url攜帶引數

可以通過window.location.search獲取url上的引數。如下面的示例。

 

a.html

<a href="./b.html?a=1&a=2&username=zhangsan&password=123&=">跳轉</a>

 

b.html

<script type="text/javascript" src="./js/getUrlParam.js"></script>
 
<script
 
>
 
var a = UrlParam.paramValues("a");
 
console.log(a);
 
</script>

 

getUrlParam.js

UrlParam = function() { // url引數
 
var data, index;
 
(function init() {
 
data = []; //值，如[["1","2"],["zhangsan"],["lisi"]]
 
index = {}; //鍵:索引，如{a:0,b:1,c:2}
 
var u = window.location.search.substr(1);
 
if (u != '') {
 
var params = decodeURIComponent(u).split('&');
 
for (var i = 0, len = params.length; i 
 
< len; i++) {
 
if (params[i] != '') {
 
var p = params[i].split("=");
 
if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p= | =
 
data.push(['']);
 
index[p[0]] = data.length - 1;
 
} else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c 捨棄
 
continue;
 
} else if (typeof(index[p[0]]) == 'undefined') { // c=aaa
 
data.push([p[1]]);
 
index[p[0]] = data.length - 1;
 
} else {// c=aaa
 
data[index[p[0]]].push(p[1]);
 
}
 
}
 
}
 
}
 
})();
 
return {
 
// 獲得引數,類似request.getParameter()
 
param : function(o) { // o: 引數名或者引數次序
 
try {
 
return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]);
 
} catch (e) {
 
}
 
},
 
//獲得引數組, 類似request.getParameterValues()
 
paramValues : function(o) { // o: 引數名或者引數次序
 
try {
 
return (typeof(o) == 'number' ? data[o] : data[index[o]]);
 
} catch (e) {}
 
},
 
//是否含有paramName引數
 
hasParam : function(paramName) {
 
return typeof(paramName) == 'string' ? typeof(index[paramName]) != 'undefined' : false;
 
},
 
// 獲得引數Map ,類似request.getParameterMap()
 
paramMap : function() {
 
var map = {};
 
try {
 
for (var p in index) { map[p] = data[index[p]]; }
 
} catch (e) {}
 
return map;
 
}
 
}
 
}();

 

此處程式碼參照：

http://blog.csdn.net/caoyuan10036/article/details/7227214

 

2、通過cookie，傳遞

cookie能夠儲存少量資料到客戶端的磁碟中，特定的網頁之間是可以共享cookie中的資料。

a.html

<script type="text/javascript" src="./js/jquery.min.js"></script>
 
<script type="text/javascript" src="./js/jquery.cookie.js"></script>
 
<script>
 
$.cookie("a","12");
 
</script>

 

b.html

<script type="text/javascript" src="./js/jquery.min.js"></script>
 
<script type="text/javascript" src="./js/jquery.cookie.js"></script>
 
<script>
 
var param = $.cookie("a");
 
console.log(param);
 
</script>

 

此處使用了jquery.cookie.js,具體用法可參照此篇文章：

http://blog.csdn.net/csdn_ds/article/details/78022177

 

3、window.open和window.opener之間傳值

window.open可以開啟一個新的頁面，在新的頁面中可以通過window.opener獲取父頁面的視窗物件，從而可以獲取父視窗中的引數。

a.html

<button id="open">開啟新的頁面</button>
 
<script>
 
$('#open').click(function () {
 
window.open('./b.html')
 
})
 
</script>

 

b.html

<script>
 
var content = window.opener.document.getElementById("open").innerHTML;
 
alert(content);
 
</script>

 

4、h5技術，window.localStorage儲存資料

在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作為本地儲存來使用的，解決了cookie儲存空間不足的問題(cookie中每條cookie的儲存空間為4k)，localStorage中一般瀏覽器支援的是5M大小，這個在不同的瀏覽器中localStorage會有所不同。此方法類似cookie，將資料存在一個公共的地方，實現頁面之間傳值。

a.html

<input type="text" name="username" />
 
<input type="button" name="" value="post" onclick="set()"/>
 
<script>
 
function set() {
 
//由於是一個新的技術，你可以通過下面的程式碼檢測你的瀏覽器是否支援
 
if (window.localStorage) {
 
//儲存變數的值
 
localStorage.name = document.all.username.value;
 
location.href = './b.html';
 
} else {
 
alert("NOT SUPPORT");
 
}
 
}
 
</script>

 

b.html

<script>
 
var value = localStorage["name"];
 
alert(value);
 
</script>

 

總結

對於不同的解決方法，都有優缺點

1、url攜帶引數

優點：取值方便，可以跨域，利於頁面分享，沒有環境限制。

缺點：url攜帶引數值的長度有限制。

2、cookie方式

優點：可以在同源內的的任意網頁中訪問，儲存資料的週期可以自由設定。

缺點：有長度限制。

3、設定視窗之間的父子關聯關係

優點：取值方便.只要window.opener指向父視窗,就可以訪問所有物件.不僅可以訪問值,還可以訪問父視窗的方法.值長度無限制。
缺點:兩視窗要存在著關係.就是利用window.open開啟的視窗。不能跨域。

4、h5技術，window.localStorage儲存資料

優點：儲存空間大，有5M儲存空間。

缺點：不是所有瀏覽器都支援。

 

個人傾向第一種方式，主要是自己做的網頁可以分享，在任何的地方都可以開啟，其他的方式都有環境的要求。如果是做大型專案，架構是實現客戶端與服務端的分離，建議還是引入客戶端框架，框架實現了路由、引數的傳遞、以及安全問題，可以大大的提高開發效率。