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();