以前沒用到過頁面間傳遞參數再從后臺獲取數據，自己總結了一些。

先說需求：現在有頁面pageA.html 和頁面pageB.html，頁面pageA.html中有一事件，當這個事件觸發時會打開頁面pageB.html。而且頁面pageB.html中的一些內容需要根據pageA.html 中的一些值來判斷顯示哪些內容或者做一些操作。

方法一：

(1)?pageA.html 中的事件為 window.open('pageB.html')或者href="pageB.html"。

(2)我們把要傳遞的值加到要打開頁面的地址后面：window.open('pageB.html?name&code&....')。

其中name、code等就是要傳遞的值。&是為便于取多個值而加的分隔符，用'-'、'|'等符號也行，下面會在用到的時候說明其作用(不加也行)。

(3)使用?window.location.search()方法獲取地址欄要傳遞的參數。得到"?name&code"。可以把其賦給一個變量：var perimeters = ?window.location.search;

(4)因為'?'也會被取到所以要用perimeters.substr(1)取到'?'之后的值。

(5)再把取到的值分割成包含一個一個值的數組，用perimeters.substr(1).split('&'),split('&')的作用就是以'&'為標記，把字符串分割成字符串數組。這里面'&'的作用就凸現出來了。

(6)到這里基本上就能得到想要的值了。不過還會遇到一個問題，如果值是字母、數字顯示是正常的，可如果傳遞的值是漢字就會出現亂碼。這里就要用到decodeURI()方法來轉換一下，就像：

decodeURI(perimeters.substr(1).split('&')[0]);就OK了。

window.open('pageB.html?name&code&....')

在pageB.html中

var perimeters = window.location.search;

perimeters = decodeURI(perimeters.substr(1).split('&')[0]);

方法二：

方法一的缺點是當有一個以上的值需要傳遞的時候，需要準確記錄每個值的位置。而本方法是以名稱值對的方式傳遞，比較友好。

從地址欄獲取參數，name(類型string)為要獲取的參數名

function getUrlParam(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)") ，// 構造一個含有目標參數的正則表達式對象

r = window.location.search.substr(1).match(reg); // 匹配目標參數

if (r != null) return decodeURI(r[2]); // 返回參數值

return null; // 如果不存在，返回null

}

例：pageB.html ? name = xiaocao & code=xiaocao0001

console.log(getUrlParam('name')) // 輸出 'xiaocao'

console.log(getUrlParam('code')) // 輸出 'xiaocao0001'

方法三：localStorage或者sessionStorage本地緩存

地址欄傳參容易被修改，也不安全，可以用localStorage或者sessionStorage

例：

設置：localStorage.setItem('obj', JSON.stringify({ name: 'xiaocao', code: 'xiaocao0001' }));

取出：var obj = JSON.parse(localStorage.getItem('obj')); // obj = {name:'xiaocao',code:'xiaocao0001'}

本地存取的方法要記得用過之后清除緩存(localStorage.removeItem('obj');?)，避免不必要的錯誤。

sessionStorage類似，區別在于存儲在 sessionStorage 里面的數據在頁面會話結束時會被清除

以上三種方法各有優缺點，可根據具體情況選用

總結

以上是生活随笔為你收集整理的html 页间传送数据,js 不同页面间传递值并取值，html不同页面间数据传递的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。