前端页面间传值之cookie传值和url传值
大家好,我是小C:
我们在做一些网站需要传值交互,最近我就遇到了这问题,如果用H5的本地存储,IE8以下是不能支持的,但是官方说到IE8及以上就支持,但是某些版本还是存在问题。所以我们来看看下面两种方法吧!
第一种方法:url传值(就像可以通过超链接的href属性传值是一样的)
举例:
1 var Id = "1"; 2 var name = "lili"; 3 window.location.href = 'two.html?userId=' +Id + "&name=" + name;
那么在two.html中该怎么接收数据呢
1 function getQueryString( name ) { 2 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 3 var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配 4 var context = ""; 5 if (r != null) 6 context = r[2]; 7 reg = null; 8 r = null; 9 return context == null || context == "" || context == "undefined" ? "" : context; 10 }
//获取Url中中文参数的方法
1 function getQueryUrlString(name) { 2 var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); 3 var r = window.location.search.substr(1).match(reg); 4 if(r != null) { 5 return decodeURI(r[2]); 6 } 7 return "请选择"; 8 } 9 $("#s").click(function(){ 10 var userId = getQueryString('Id'); 11 var dialogId = getQueryString('name'); 12 alert(Id); 13 alert(name); 14 })
二:cookie传值(这个跟H5的本地存储的使用方法其实差不了多少。)
1 $(function(){ 2 var data = { 3 id: "1", 4 name: "dingding", 5 age: 20 6 } 7 $.cookie('data',JSON.stringify(data)); 8 window.location = "two.html"; 9 })
切记:这里一定要把data对象通过方法JSON.stringify()方法序列化成字符串。因为,cookie只能传字符串
那么,在two.html中该如和取值呢
取值比较简单,唯一需要切记的就是从cookie中取到的是字符串类型的数据,不能直接使用,需要用JSON.parse()方法处理一下变成对象
具体如下
1 $(function(){ 2 var data = $.cookie("data"); 3 var m = JSON.parse(data); 4 console.log(m.id)//数据的使用 5 })
有不足的地方,请多多指教。