前端页面间传值之cookie传值和url传值
大家好,我是小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传值的更多相关文章
- web前端页面解决中文传参乱码问题
问题背景:在项目中往往会涉及到前端跳转页面时要传一些参数给下一个页面,如果参数是英文或者数字的时候就很好解决,然而有时候传参会涉及到中文汉字,这个时候再单纯的拼接往往就会导致中文乱码,下面我们就该讨论 ...
- 页面间固定参数,通过cookie传值
最后在做的页面,比如用户数据(用户头像,名称,年龄)这些信息,因为大部分页面都要用,之前是通过url地址传,另一页面接收.考虑到这样做会让url过长,因此,尝试使用cookie,把固定的值保存在coo ...
- asp.net页面间传值方式
使用asp.net开发项目,必然会在页面间进行传值,本文介绍几种常见的页面传值方式,仅作笔记,以便后续查找使用. 前提:新建两个页面:ValuePage.aspx,ObtainValue.aspx,本 ...
- ASP.NET十分有用的页面间传值方法
一.目前在ASP.NET中页面传值共有这么几种方式: 1.表单提交, <form action= "target.aspx" method = "post&qu ...
- ASP.NET页面间传值总结
本文我们将讨论的是ASP.NET页面间数据传递的几种方法,对此希望能帮助大家正确的理解ASP.NET页面间数据传递的用处以及便利性. Web页面是无状态的,服务器对每一次请求都认为来自不同用户,因此, ...
- ASP.Net页面间传值
一.目前在ASP.NET中页面传值共有这么几种方式: 1.表单提交, <form action= "target.aspx" method = "post&qu ...
- JSP页面间的传值方法总结
JSP 页面间传递参数是项目中经常需要的,这应该算是 web 基本功吧.试着将各种方式总结下来,需要时可以进行权衡利弊选择最合适的方式.下面来一起看看详细的介绍: 1. URL 链接后追加参数 ? 1 ...
- HTML5 Web存储 页面间进行传值
在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...
- B/S结构中页面间的传值
常见的页面间的传值有session,cookie,application,server.transfer(),queryString,今天主要记录一下server.transfer()的用法. 从A页 ...
随机推荐
- 解决数据库mysql插入乱码问题
当我们遇到mysql乱码问题的时候,一般要修改my.ini文件: 我遇到的是两个版本,一个是mysql5.5版本,另一个是mysql5.7 5.5的是在这个目录下面:C:\Program Files\ ...
- python全栈学习--day9(函数初始)
Python 函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也 ...
- Java基础学习笔记五 Java基础语法之面向对象
面向对象 理解什么是面向过程.面向对象 面向过程与面向对象都是我们编程中,编写程序的一种思维方式.面向过程的程序设计方式,是遇到一件事时,思考“我该怎么做”,然后一步步实现的过程.例如:公司打扫卫生( ...
- 网易云音乐APP分析
网易云音乐-感受音乐的力量 你选择的产品是? 网易云音乐 为什么选择该产品作为分析? 之前用的一直是QQ音乐,但是有一天一个朋友分享了一首网易云上的音乐(顺便分享一下歌名:Drop By Drop) ...
- Beta冲刺计划---Day0
Beta阶段报告---Day0 1.需要改进完善的功能 我们上一阶段开发由于开发时间匆忙,对于爬虫耗时的优化没有考虑.优化的空间我在Alpha阶段的总结报告里说过,具体看下图. 这张图显示出爱 ...
- 20162302 实验一《Java开发环境的熟悉》实验报告
实 验 报 告 课程:程序设计与数据结构 姓名:杨京典 班级:1623 学号:20162302 实验名称:Java开发环境的熟悉 实验器材:装有Ubuntu的联想拯救者80RQ 实验目的与要求:1.使 ...
- python-装饰器简述
装饰器是什么 用来修饰别的函数的函数就可以称之为装饰器 这种函数的参数一般就是另外一个函数 也就是说,调用这种函数,需要给这种函数传参,且参数是函数 @语法糖 @语法糖一般用来表示装饰器函数 不用@也 ...
- oracle导入命令,记录一下
工作中用到了,这个命令,记录一下,前提要安装imp.exe imp PECARD_HN/PECARD_HN@127.0.0.1:1521/orcl file=E:\work\dmp\PECARD_HN ...
- 改变this不要怕!!!
在之前的学习和工作中,会不必要的涉及到 改变this的指向问题: 脑子里会想到的是 apply, call, bind 这三个 可逆知道他的区别吗? 1. bind区别于 apply和call 是因为 ...
- AWS的开发工具包和设备SDK开发工具包
一.开发工具包 二.设备sdk开发工具包