js 不同页面间传递值并取值

以前没用到过页面间传递参数再从后台获取数据,自己总结了一些。

先说需求现在有页面pageA.html 和页面pageB.html,页面pageA.html中有一事件,当这个事件触发时会打开页面pageB.html。而且页面pageB.html中的一些内容需要根据pageA.html 中的一些值来判断显示哪些内容或者做一些操作。

方法一:

(1) pageA.html 中的事件为 window.open('pageB.html')或者href="pageB.html"。
(2)我们把要传递的值加到要打开页面的地址后面:window.open('pageB.html?name&code&....')。
其中name、code等就是要传递的值。&是为便于取多个值而加的分隔符,用'-'、'|'等符号也行,下面会在用到的时候说明其作用(不加也行)。
(3)使用 window.location.search()方法获取地址栏要传递的参数。等到"?name&code"。可以把其赋给一个变量:var perimeters =  window.location.search;
(4)因为'?'也会被取到所以要用perimeters.substr(1)取到'?'之后的值。
(5)再把取到的值分割成包含一个一个值的数组,用perimeters.substr(1).split('&'),split('&')的作用就是以'&'为标记,把字符串分割成字符串数组。这里面'&'的作用就凸现出来了。
(6)到这里基本上就能得到想要的值了。不过还会遇到一个问题,如果值是字母、数字显示是正常的,可如果传递的值是汉字就会出现乱码。这里就要用到decodeURI()方法来转换一下,就像:
decodeURI(perimeters.substr(1).split('&')[0]);就OK了

window .open ( 'pageB.html?name&code&....' )
在pageB.html
var perimeters = window .location .search ;
perimeters = decodeURI (perimeters .substr ( 1 ).split ( '&' )[ 0 ]);



方法二:
方法一的缺点是当有一个以上的值需要传递的时候,需要准确记录每个值的位置。而本方法是以名称值对的方式传递,比较友好。
从地址栏获取参数,name(类型string)为要获取的参数名
   
     function getUrlParam (name ) {
var reg = new RegExp ( "(^|&)" + name + "=([^&]*)(&|$)" )// 构造一个含有目标参数的正则表达式对象
r = window .location .search .substr ( 1 ).match (reg ); // 匹配目标参数
if (r != null ) return decodeURI (r [ 2 ]); // 返回参数值
return null ; // 如果不存在,返回null
}
例:pageB .html ? name = xiaocao & code =xiaocao0001
console .log (getUrlParam ( 'name' )) // 输出 'xiaocao'
console .log (getUrlParam ( 'code' )) // 输出 'xiaocao0001'



方法三:localStorage或者sessionStorage本地缓存

地址栏传参容易被修改,也不安全,可以用localStorage或者sessionStorage

例:


设置:localStorage .setItem ( 'obj' , JSON .stringify ({ name : 'xiaocao' , code : 'xiaocao0001' }));

取出: var obj = JSON .parse (localStorage .getItem ( 'obj' )); // obj = {name:'xiaocao',code:'xiaocao0001'}


本地存取的方法要记得用过之后清除缓存(localStorage.removeItem('obj'); ),避免不必要的错误。

sessionStorage类似,区别在于存储在 sessionStorage 里面的数据在页面会话结束时会被清除

以上三种方法各有优缺点,可根据具体情况选用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值