在前端开发中我们常常需要从一个跳到另一个页面,并且将当前页面的数据传递过去,总结一下我的方法:
1 通过URL传值,不过有个缺点就是传输的值不能太大,因为浏览器对与URL的长度是有限制的。
首先定义getQueryString方法
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;
}
例如跳转到
redemption.html?windcode=001992.OF&holdAmount=630451.65&fundName=农银汇理天天利B&id=65&origin=position
在redemption.html页面中直接getQueryString(windcode), getQueryString(holdAmount), getQueryString(fundName) , getQueryString(origin)即可得到值
2 通过localStorage 和 sessionStorage 先存本地再取出数据
setItem存储value
用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:
sessionStorage.setItem("key", "value"); localStorage.setItem("site",
"js8.in");
getItem获取value
用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:
var value = sessionStorage.getItem("key"); var site =
localStorage.getItem("site");
localstarage和sesionstorage 只能存储字符串类型值,对象类型的值可以先进行转化
例如:
var obj = { name:'Jim' };
var str = JSON.stringify(obj);
//存入
sessionStorage.obj = str;
//读取
str = sessionStorage.obj;
//重新转换为对象
obj = JSON.parse(str);
所以如果要存储的数据是一个对象的话,就需要将对象转换为字符串,在取数据的在将字符串转为对象就可以了
对象转字符串 JSON.stringify( " 对象 " )
字符串转对象 JSON.parse( " 字符串 " )
3 JavaScript通过Window.open传值
这两窗口之间存在着关系,父窗口index.html打开子窗口single.html子窗口可以通过window.opener指向父窗口,这样可以访问父窗口的对象,在single.html页面编写下面的代码:
<script language=”javascript” >
//window.open打开的窗口.
//利用opener指向父窗口.
var parentText = window.opener.document.all.maintext.value;
alert(parentText);
</script>
4. 通过cookie方法传值,我这里使用的是jQuery cookie,因此需要先加载jQuery与cookie:
<!--使用cookie-->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.changer.hk/jquery/plugins/jquery.cookie.js"></script>
在其中一个页面,比如首页,将要保存的值存放在cookie.
如果仅是一个id,直接使用键值对的方法保存即可:
//将id保存在cookie
$.cookie('doctorId', '11916111-f2eb-11e4-b756-f40669963d49');
//从cookie中取出id
var doctorId = $.cookie('doctorId');
如果是多个值,需要将多个值放在对象中,保存这个对象:
//将多个值存放在对象中
var userData = {
userId: "11916122-f2eb-11e4-b756-f40669963d49",
patientName: "张丽",
patientAge: 23,
patientSex: "F"
}
//将这个对象保存在cookie,它的键是对象名称,值为JSON.stirng(),目的是将这个对象解析为字符串,因为cookie的键与值都是字符串
$.cookie('userData' , JSON.stringify(userData));
如果在其它页面使用这个cookie中对象,可以取出这个对象并将对象转换为字符串
var userData = $.cookie('userData');
if(userData){
//JSON.parse() 将字符串解析为对象,方便使用
userData = JSON.parse(userData);
};
还有其他方式,不过要通过服务器属于后端方法,这里不做解释