利用地址栏URL传值,location传值,cookie传值三种方法
方法一:
通过URL传值
eg:location.href="跨页面1-2.html?age=18&gender=man";
在下个页面接收:
//1、location.search获取get请求的参数 获取到的数据,是以?开头的
var search=location.search;
//2、如果还想要获取确定的数据,可以解析字符串
function parse(search){
//从第二个字符开始截取 ,获取到第二个开始后面所有的字符
var str=search.substring(1);
var result={};
//分割字符串 -->产生字符串数组
var strs=str.split("&");
//遍历数组中的每一个元素
strs.forEach(function(v){
//伪代码:v="age=18"
var keyvalue=v.split("=");
var name=keyvalue[0];
var value=keyvalue[1];
result[name]=value;
})
return result;
}
var r=parse(search);
方法二:
使用h5的localStorage,或者sessionStorage存储对象类型
因为浏览器的兼容问题,有些浏览器可能不支持,你可以用下列代码做个简单确认:
if(typeof(Storage)=="undefined")
{
document.getElementById("result").innerHTML="对不起,您的浏览器不支持 web 存储。";
}
存储对象的正确的方式:
var p2={name:"周瑜",age:16};
var s2=JSON.stringify(p2); //将对象"序列化"为JSON数据(字符串格式)
localStorage.setItem("p2",s2); //以字符串格式存储信息
获取对象:
var s2_2=localStorage.getItem("p2"); //获取存储的信息,也是字符串格式
var p2_2=JSON.parse(s2_2); //将JSON数据反序列化为对象
localStroage和sessionStorage使用大致相同,他们的不同之处在于,localstroage是永久保存,而sessionstroage是会话存在,
当会话结束,sessionstroage保存值也会清空。
方法三:
使用cookie保存:
原生cookie
//1、保存一条数据
document.cookie="name=abc";
document.cookie="age=18";
//2、获取所有数据
var cookie=document.cookie;
console.log(cookie); //"name=abc; age=18; PHPSESSID=fr1njdv6apf3neoj5nehntrps7"
//之后可以解析字符串,获取指定的数据内容
//3、设置cookie的有效期
document.cookie="id=666;expires="+new Date("2017-10-22 08:00");
jQuery.cookie.js插件
//第一种类型:会话cookie
//1、设置值
$.cookie("phone","13188886666");
$.cookie("email","123@qq.com");
//2、获取值
var phone=$.cookie("phone");
console.log(phone);
var email=$.cookie("email");
console.log(email);
//第二种类型:设置长期cookie(具有指定有效期)
$.cookie("address","广东深圳市",{
expires:7 //expires不仅仅可以是日期类型的对象,也可以是以天为单位的数字
});
$.cookie("tel","0755-88888888",{
expires:1/24 //该cookie值就会保存一小时
});
$.cookie("birthday","1.1",{
expires:new Date("2018-01-01 08:00") //对于这样的过期时间,已经在内部处理好了时区问题
});
//删除指定的cookie
$.removeCookie("birthday");
使用cookie可用来跨页面传值-状态保持