页面之间传值

利用地址栏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可用来跨页面传值-状态保持

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晓峰子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值