前端页面间传值之cookie传值和url传值
2018-06-24 01:17:29来源:未知 阅读 ()
大家好,我是小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 })
有不足的地方,请多多指教。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- js调用刷新界面的几种方式 2020-03-05
- 高性能JavaScript循环语句和条件语句 2020-02-21
- 默认让页面的第一个控件选中的javascript代码 2020-02-20
- web如何实现页面分页打印 2020-02-14
- Javascript实现前端简单的路由实例 2019-12-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash