H5页面跳转与传值

太过爱你忘了你带给我的痛 2022-07-13 15:49 290阅读 0赞

页面之间的跳转经常使用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:;" οnclick="javascript:showDetails('+data.result\[i\].msgSource+')"  class="more">查看详情</a>

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

H5页面跳转与传值

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Vue页面跳转传值和取值

相关 IOS H5页面跳转有延迟

相关 H5页面跳转与传值

相关页面跳转传值angularjs

相关 JS实现页面跳转并传值

相关 Intent实现页面跳转和传值

相关 js页面跳转并传值问题

相关 js页面跳转传值

相关 JAVASCRIPT 页面跳转传值

相关 html5页面跳转传值以及哈希加密