大家好,我是小C:

我们在做一些网站需要传值交互,最近我就遇到了这问题,如果用H5的本地存储,IE8以下是不能支持的,但是官方说到IE8及以上就支持,但是某些版本还是存在问题。所以我们来看看下面两种方法吧!

第一种方法:url传值(就像可以通过超链接的href属性传值是一样的)

举例:

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

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

 function getQueryString( name ) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
var context = "";
if (r != null)
context = r[2];
reg = null;
r = null;
return context == null || context == "" || context == "undefined" ? "" : context;
}

//获取Url中中文参数的方法

 function getQueryUrlString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if(r != null) {
return decodeURI(r[2]);
}
return "请选择";
}
$("#s").click(function(){
var userId = getQueryString('Id');
var dialogId = getQueryString('name');
alert(Id);
alert(name);
})

二:cookie传值(这个跟H5的本地存储的使用方法其实差不了多少。)

 $(function(){
var data = {
id: "1",
name: "dingding",
age: 20
   }
$.cookie('data',JSON.stringify(data));
window.location = "two.html";
})

切记:这里一定要把data对象通过方法JSON.stringify()方法序列化成字符串。因为,cookie只能传字符串

那么,在two.html中该如和取值呢

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

具体如下

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

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

前端页面间传值之cookie传值和url传值的更多相关文章

  1. web前端页面解决中文传参乱码问题

    问题背景:在项目中往往会涉及到前端跳转页面时要传一些参数给下一个页面,如果参数是英文或者数字的时候就很好解决,然而有时候传参会涉及到中文汉字,这个时候再单纯的拼接往往就会导致中文乱码,下面我们就该讨论 ...

  2. 页面间固定参数,通过cookie传值

    最后在做的页面,比如用户数据(用户头像,名称,年龄)这些信息,因为大部分页面都要用,之前是通过url地址传,另一页面接收.考虑到这样做会让url过长,因此,尝试使用cookie,把固定的值保存在coo ...

  3. asp.net页面间传值方式

    使用asp.net开发项目,必然会在页面间进行传值,本文介绍几种常见的页面传值方式,仅作笔记,以便后续查找使用. 前提:新建两个页面:ValuePage.aspx,ObtainValue.aspx,本 ...

  4. ASP.NET十分有用的页面间传值方法

    一.目前在ASP.NET中页面传值共有这么几种方式: 1.表单提交,   <form action= "target.aspx" method = "post&qu ...

  5. ASP.NET页面间传值总结

    本文我们将讨论的是ASP.NET页面间数据传递的几种方法,对此希望能帮助大家正确的理解ASP.NET页面间数据传递的用处以及便利性. Web页面是无状态的,服务器对每一次请求都认为来自不同用户,因此, ...

  6. ASP.Net页面间传值

    一.目前在ASP.NET中页面传值共有这么几种方式: 1.表单提交,   <form action= "target.aspx" method = "post&qu ...

  7. JSP页面间的传值方法总结

    JSP 页面间传递参数是项目中经常需要的,这应该算是 web 基本功吧.试着将各种方式总结下来,需要时可以进行权衡利弊选择最合适的方式.下面来一起看看详细的介绍: 1. URL 链接后追加参数 ? 1 ...

  8. HTML5 Web存储 页面间进行传值

    在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...

  9. B/S结构中页面间的传值

    常见的页面间的传值有session,cookie,application,server.transfer(),queryString,今天主要记录一下server.transfer()的用法. 从A页 ...

随机推荐

  1. java.text.DateFormat 多线程并发问题

    在日常开发中,java.text.DateFormat 应该算是使用频率比较高的一个工具类,经常会使用它 将 Date 对象转换成字符串日期,或者将字符串日期转化成 Date 对象.先来看一段眼熟的代 ...

  2. DB2开发系列之四——触发器

    1.触发器类型 1)BEFORE 触发器:在对表插入或更新之前执行该触发器,允许使用CALL 和 SIGNAL SQL 语句: 2)BEFORE DELETE 触发器:在删除操作之前执行该触发器: 3 ...

  3. 使用 Except 和 Intersect

    做了一个如下的小厕所,如果我需要得到返回是 d,f 那我需要用那组语句呢? A: ;WITH CA AS( SELECT * FROM (VALUES('a'),('b'),('c'),('d'))a ...

  4. 云计算--网络原理与应用--20171122--STP与HSRP

    简单了解STP 学习HSRP 实验 一.  简单学习STP STP(spanning tree protocol)生成树协议,就是把一个环形的结构改变成一个树形的结构.通过一些算法,在逻辑上阻塞一些端 ...

  5. python IDLE中反斜杠显示为人民币符号¥的解决办法

    改换英文字体即可

  6. 每日冲刺报告-Day3

    敏捷冲刺每日报告--Day3 情况简介 今天的任务是把json处理函数加入到爬虫中,把搜索到的结果存到json文件里去. 任务进度 赵坤:在爬虫中加入了json处理的代码,解决了在控制台打印中文列表/ ...

  7. 201621123057 《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 源代码阅读:多线程程序BounceThread 1.1 BallR ...

  8. 关于collectionView和tableView的两种cell的出列方法的区别

    相信好多人一定会对collectionView和tableView的两种cell出列方法有所疑问,下面以UICollection为例子进行举例说明 假设我们已经创建了一个collectionView, ...

  9. 关于jvm的OutOfMemory:PermGen space异常的解决

    在做网校的时候,经常会在控制台会报出方法区的内存溢出,在网上找的方法,无非都是在tomcat的bin/catalina.bat文件中 设置jvm的堆的大小和方法区的大小,但是通过eclipse启动to ...

  10. DOM中的事件对象(event)

    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件相关的信息. 包括导致事件的元素.事件的类型以及其他与特定事件相关的信息. 例如:鼠标操作导致的事件对象中,会包含鼠 ...