問題

因最近嘗試實(shí)現(xiàn)客戶端與服務(wù)端分離，服務(wù)端只提供接口，客戶端用html+js實(shí)現(xiàn)，分成兩個(gè)獨(dú)立的項(xiàng)目部署，因項(xiàng)目是個(gè)人項(xiàng)目，客戶端展示不考慮使用像Angular、Vue、Native這種前端框架實(shí)現(xiàn)，于是全部使用靜態(tài)頁面實(shí)現(xiàn)，請(qǐng)求數(shù)據(jù)用ajax，在開發(fā)的過程中，就遇到了頁面之間傳值的問題。

解決方法

post提交表單跳轉(zhuǎn)的方式肯定不行了，因服務(wù)端并不處理這些請(qǐng)求參數(shù)，連到達(dá)客戶端的機(jī)會(huì)都沒有，此時(shí)只能考慮get方式了，因get方式參數(shù)在url上，跳轉(zhuǎn)后的頁面肯定能獲取到。還有一種思路，就是將參數(shù)存到一個(gè)公共的地方，頁面都可以獲取到，按這兩種思路，總結(jié)了如下的解決方法。

1、get方式，url攜帶參數(shù)

可以通過window.location.search獲取url上的參數(shù)。如下面的示例。

a.html

1 跳轉(zhuǎn)

b.html

1

2

3 　　var a = UrlParam.paramValues("a");

4 　　console.log(a);

5

getUrlParam.js

1 UrlParam = function() { // url參數(shù)

2 　　var data, index;

3 　　(function init() {

4 　　　　data = []; //值，如[["1","2"],["zhangsan"],["lisi"]]

5 　　　　index = {}; //鍵:索引，如{a:0,b:1,c:2}

6 　　　　var u = window.location.search.substr(1);

7 　　　　if (u != '') {

8 　　　　　　var params = decodeURIComponent(u).split('&');

9 　　　　　　for (var i = 0, len = params.length; i < len; i++) {

10 　　　　　　　　if (params[i] != '') {

11 　　　　　　　　　　var p = params[i].split("=");

12 　　　　　　　　　　if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p= | =

13 　　　　　　　　　　　　data.push(['']);

14 　　　　　　　　　　　　index[p[0]] = data.length - 1;

15 　　　　　　　　　　} else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c 舍棄

16 　　　　　　　　　　　　continue;

17 　　　　　　　　　　} else if (typeof(index[p[0]]) == 'undefined') { // c=aaa

18 　　　　　　　　　　　　data.push([p[1]]);

19 　　　　　　　　　　　　index[p[0]] = data.length - 1;

20 　　　　　　　　　　} else {// c=aaa

21 　　　　　　　　　　　　data[index[p[0]]].push(p[1]);

22 　　　　　　　　　　}

23 　　　　　　　　}

24 　　　　　　}

25 　　　　}

26 　　})();

27 　　return {

28 　　　　// 獲得參數(shù),類似request.getParameter()

29 　　　　param : function(o) { // o: 參數(shù)名或者參數(shù)次序

30 　　　　　　try {

31 　　　　　　　　return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]);

32 　　　　　　} catch (e) {

33 　　　　　　}

34 　　　　},

35 　　　　//獲得參數(shù)組, 類似request.getParameterValues()

36 　　　　paramValues : function(o) { // o: 參數(shù)名或者參數(shù)次序

37 　　　　　　try {

38 　　　　　　　　return (typeof(o) == 'number' ? data[o] : data[index[o]]);

39 　　　　　　} catch (e) {}

40 　　　　},

41 　　　　//是否含有paramName參數(shù)

42 　　　　hasParam : function(paramName) {

43 　　　　　　return typeof(paramName) == 'string' ? typeof(index[paramName]) != 'undefined' : false;

44 　　　　},

45 　　　　// 獲得參數(shù)Map ,類似request.getParameterMap()

46 　　　　paramMap : function() {

47 　　　　　　var map = {};

48 　　　　　　try {

49 　　　　　　　　for (var p in index) { map[p] = data[index[p]]; }

50 　　　　　　} catch (e) {}

51 　　　　　　return map;

52 　　　　}

53 　　}

54 }();

此處代碼參照：

2、通過cookie，傳遞

cookie能夠存儲(chǔ)少量數(shù)據(jù)到客戶端的磁盤中，特定的網(wǎng)頁之間是可以共享cookie中的數(shù)據(jù)。

a.html

1

2

3

4 　　$.cookie("a","12");

5

b.html

1

2

3

4 　　var param = $.cookie("a");

5 　　console.log(param);

6

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

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

window.open可以打開一個(gè)新的頁面，在新的頁面中可以通過window.opener獲取父頁面的窗口對(duì)象，從而可以獲取父窗口中的參數(shù)。

a.html

1 打開新的頁面

2

3 　　$('#open').click(function () {

4 　　　　window.open('./b.html')

5 　　})

6

b.html

1

2 　 var content = window.opener.document.getElementById("open").innerHTML;

3 　　alert(content);

4

4、h5技術(shù)，window.localStorage存儲(chǔ)數(shù)據(jù)

在HTML5中，新加入了一個(gè)localStorage特性，這個(gè)特性主要是用來作為本地存儲(chǔ)來使用的，解決了cookie存儲(chǔ)空間不足的問題(cookie中每條cookie的存儲(chǔ)空間為4k)，localStorage中一般瀏覽器支持的是5M大小，這個(gè)在不同的瀏覽器中l(wèi)ocalStorage會(huì)有所不同。此方法類似cookie，將數(shù)據(jù)存在一個(gè)公共的地方，實(shí)現(xiàn)頁面之間傳值。

a.html

1

2

3

4 　　function set() {

5 　　　　//由于是一個(gè)新的技術(shù)，你可以通過下面的代碼檢測你的瀏覽器是否支持

6 　　　　if (window.localStorage) {

7 　　　　//存儲(chǔ)變量的值

8 　　　　　　localStorage.name = document.all.username.value;

9 　　　　　　location.href = './b.html';

10 　　　　} else {

11 　　　　　　alert("NOT SUPPORT");

12 　　　　}

13 　　}

14

b.html

1

2 　　var value = localStorage["name"];

3 　　alert(value);

4

總結(jié)

對(duì)于不同的解決方法，都有優(yōu)缺點(diǎn)

1、url攜帶參數(shù)

優(yōu)點(diǎn)：取值方便，可以跨域，利于頁面分享，沒有環(huán)境限制。

缺點(diǎn)：url攜帶參數(shù)值的長度有限制。

2、cookie方式

優(yōu)點(diǎn)：可以在同源內(nèi)的的任意網(wǎng)頁中訪問，存儲(chǔ)數(shù)據(jù)的周期可以自由設(shè)置。

缺點(diǎn)：有長度限制。

3、設(shè)置窗口之間的父子關(guān)聯(lián)關(guān)系

優(yōu)點(diǎn)：取值方便.只要window.opener指向父窗口,就可以訪問所有對(duì)象.不僅可以訪問值,還可以訪問父窗口的方法.值長度無限制。

缺點(diǎn):兩窗口要存在著關(guān)系.就是利用window.open打開的窗口。不能跨域。

4、h5技術(shù)，window.localStorage存儲(chǔ)數(shù)據(jù)

優(yōu)點(diǎn)：儲(chǔ)存空間大，有5M存儲(chǔ)空間。

缺點(diǎn)：不是所有瀏覽器都支持。

個(gè)人傾向第一種方式，主要是自己做的網(wǎng)頁可以分享，在任何的地方都可以打開，其他的方式都有環(huán)境的要求。如果是做大型項(xiàng)目，架構(gòu)是實(shí)現(xiàn)客戶端與服務(wù)端的分離，建議還是引入客戶端框架，框架實(shí)現(xiàn)了路由、參數(shù)的傳遞、以及安全問題，可以大大的提高開發(fā)效率。

來源：https://www.cnblogs.com/crazyWang/p/12073472.html

總結(jié)

以上是生活随笔為你收集整理的html传值方式有哪几种,关于html页面间传值的几种方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。