JS跨頁面呼叫變數的方法
阿新 • • 發佈:2018-11-28
在前端開發中,一個B頁面需要使用另一個頁面A中的變數時,通常採用兩種方式,url傳參或者本地儲存並獲取變數的值。
-
使用url傳參,當A頁面跳轉至B頁面時,將變數值拼接在url後面,B頁面可以使用封裝的函式獲取url中拼接的變數值。例如:
A頁面程式碼:window.location.href = B.html?uid=1000;
B頁面程式碼:
function GetRequest(){ var url = window.location.search; //獲取url中"?"符後的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]); } } return theRequest; } //呼叫方式 var Request = new Object(); Request = GetRequest(); var uid = Request['uid']; //獲取到了url中uid的值1000 另外一種方式,比上面的要好用一些 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"); var r = window.location.search.substr(1).match(reg); if (r!=null) return (r[2]); return null; } var uid= GetQueryString('uid');
-
使用本地儲存,A頁面需要將變數值儲存在本地,B頁面去本地讀取資料,就可以使用這個變數。
當A頁面與B頁面之間沒有直接的跳轉關係時,使用url傳參的方式,就不是很好用了。這種情況下,可以採用本地儲存的方式。- cookie的使用在另一篇部落格中有詳細的介紹,附上鍊接:前端開發中的cookie使用總結。
-
localStorage 方法儲存的資料沒有時間限制。第二天、第二週或下一年之後,資料依然可用,除非使用者手動刪除,例如清除快取資料。
localStorage使用方式如下:
A頁面:// 寫入資料 localStorage.setItem('uid','1000'); //將變數uid(值為1000)儲存至本地
B頁面:
// 讀取資料 localStorage.getItem('uid'); //獲取本地儲存中uid的值(1000)
資料的刪除:
//刪除某個鍵值對 localStorage.removeItem('uid'); //清除localStorage的所有內容 localStorage.clear();
-
sessionStorage 方法針對一個 session 進行資料儲存。當用戶關閉瀏覽器視窗後,資料會被刪除。
sessionStorage用法與localStorage相同,只需將localStorage換為sessionStorage即可。例如:sessionStorage.setItem(‘uid’,’1000’);
-
其他注意事項:
1.localStorage只支援string型別的儲存,所以當我們需要把JSON存入localStorage中時,需要使用JSON.stringify(),將JSON轉換為JSON字串。
例如:var data={ username:'zzyn', uid:'100000' }; var strData=JSON.stringify(data); localStorage.setItem("data",strData);
2.讀取資料之後,要將JSON字串轉換為JSON物件,利用JSON.parse()方法。
var data = localStorage.getItem('data'); var dataObj = JSON.parse(data);