页面之间传值的方法

在前端开发中我们常常需要从一个跳到另一个页面，并且将当前页面的数据传递过去，总结一下我的方法：

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

};

 

还有其他方式，不过要通过服务器属于后端方法，这里不做解释