H5頁面跳轉與傳值

 頁面之間的跳轉常用a標籤，使用mvc框架的都是經過訪問controller的請求方法，返回請求頁面。但本次開發，前端與後臺徹底分離，前端APP使用HBuider來開發，後臺數據就沒法使用mvc框架訪問數據的方法了。

 

       H5提供了本地存儲用戶瀏覽數據的方法，早些時候,本地存儲使用的是 cookie。可是Web 存儲須要更加的安全與快速. 這些數據不會被保存在服務器上，可是這些數據只用於用戶請求網站數據上.它也能夠存儲大量的數據，而不影響網站的性能。

 

      數據以 鍵/值 對存在, web網頁的數據只容許該網頁訪問使用。

 

       主要使用的是localStorage和sessionStorage對象。 localStorage - 沒有時間限制的數據存儲； sessionStorage - 針對一個 session 的數據存儲（關閉窗口，存儲的數據清空）。

 

     1.  localStorage實現方式：

      

      （1）存儲：localStorage.setItem("name","張三")；

      

       （2）獲取數據：var name=localStorage.getItem("name");

 

       （3）移除： localStorage.removeItem("name");

 

       （4）清楚全部：localStorage.clear();

 

       （5）保存非字符串，須要使用JSON轉化：

 

         存：oStorage.setItem('data', JSON.stringify(data));  取：var data = JSON.parse(oStorage.getItem('data'));

 

2.  sesstionStorage的方式與localStorage基本相同：

sessionStorage.setItem("key", "value"); var value = sessionStorage.getItem("key");

 

3.  與cookie比較：

    

       a. 它存儲容量更大 b. 每次請求，cookie都要被傳送，浪費帶寬，另外，cookie不能夠跨域訪問

 

4. 頁面跳轉舉例：

 

 

mui頁面跳轉並傳值：

      function showDetails(msgSource){ mui.openWindow({ url:viewUrl+"Character1.html", id:"Character1.html", extras:{"companyID":companyID,"msgSource":msgSource,"msg_type":msg_type} }); }

 

a標籤跳轉：<a href="'+viewUrl+'Character1.html?msg_source='+data.result[i].msgSource+'"  class="more">

調用方法跳轉：</div>'+'<a href="javascripte:;" onclick="javascript:showDetails('+data.result[i].msgSource+')"  class="more">查看詳情</a>

 

頁面刷新：window.location.reload();