1. 程式人生 > >JS跨頁面呼叫變數的方法

JS跨頁面呼叫變數的方法

在前端開發中,一個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傳參的方式,就不是很好用了。這種情況下,可以採用本地儲存的方式。

    1. cookie的使用在另一篇部落格中有詳細的介紹,附上鍊接:前端開發中的cookie使用總結。
    2. localStorage 方法儲存的資料沒有時間限制。第二天、第二週或下一年之後,資料依然可用,除非使用者手動刪除,例如清除快取資料。

      localStorage使用方式如下: 
      A頁面:

      // 寫入資料
      localStorage.setItem('uid','1000');  //將變數uid(值為1000)儲存至本地

      B頁面:

      // 讀取資料
      localStorage.getItem('uid');  //獲取本地儲存中uid的值(1000)

      資料的刪除:

      //刪除某個鍵值對
      localStorage.removeItem('uid');
      
      //清除localStorage的所有內容
      localStorage.clear();
    3. 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);