前端页面间传值之cookie传值和url传值

你们好,我是小C:html

咱们在作一些网站须要传值交互,最近我就遇到了这问题,若是用H5的本地存储,IE8如下是不能支持的,可是官方说到IE8及以上就支持,可是某些版本仍是存在问题。因此咱们来看看下面两种方法吧!cookie

第一种方法:url传值(就像能够经过超连接的href属性传值是同样的)网站

举例:url

1 var Id = "1";
2 var name = "lili";
3 window.location.href = 'two.html?userId=' +Id + "&name=" + name;

那么在two.html中该怎么接收数据呢spa

 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中中文参数的方法code

 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的本地存储的使用方法其实差不了多少。)htm

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中该如和取值呢blog

取值比较简单,惟一须要切记的就是从cookie中取到的是字符串类型的数据,不能直接使用,须要用JSON.parse()方法处理一下变成对象字符串

具体以下

1 $(function(){
2     var data = $.cookie("data");
3     var m = JSON.parse(data);
4     console.log(m.id)//数据的使用
5 })

有不足的地方,请多多指教。

相关文章
相关标签/搜索