大家好,我是小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. zabbix通过SNMP监控服务器硬件及构建触发器

    公司的服务器没装系统无法使用IPMI协议来监控服务器硬件信息,所以我们使用SNMP来获取,下面介绍如何通过SNMP监控服务器硬件信息. 1.HP服务器进入iLO开启SNMP协议. 2.查看服务器温度信 ...

  2. [转]C++ 初始化列表的初始化顺序

    构造函数初始化列表仅用于初始化成员的值,并不指定这些初始化执行的次序.成员被初始化的次序就是定义成员的次序.第一个被定义的成员先被初始化,依次类推.一般,初始化的顺序无关紧要,然而,如果一个成员是根据 ...

  3. 使用 win10 的正确姿势 (第二版)

    文章为本人原创,转载请注明出处,谢谢. 17年9月初,写了第一篇<使用 win10 的正确姿势>,而现在半年多过去,文章更新了一些,主要是桌面的变化. 一. 重新定义桌面 我的桌面: 将桌 ...

  4. Java基础学习笔记总结

    Java基础学习笔记一 Java介绍 Java基础学习笔记二 Java基础语法之变量.数据类型 Java基础学习笔记三 Java基础语法之流程控制语句.循环 Java基础学习笔记四 Java基础语法之 ...

  5. 使用git将文件上传到Coding

    1,首先在Coding上新建项目. 2,填写项目的相关内容. 3,建立项目后复制下面鼠标所选内容. 4,在自己的电脑中建立文件夹. 5,进入该文件夹后,点击鼠标右键,然后再点Git  Clone. 6 ...

  6. Django 视图层

    URL映射 1.分布式url映射 include()函数提供分布式url映射功能,使URL映射可以被编写在多个url.py文件中 from django.conf.urls import url fr ...

  7. nyoj n-1位数

    n-1位数 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 已知w是一个大于10但不大于1000000的无符号整数,若w是n(n≥2)位的整数,则求出w的后n-1位的 ...

  8. JAVA_SE基础——37.main方法的详解

    主函数 大家都会写吧. 大家一直都不知道为何这样设计,这样设计有什么好处呢? 白话解释: main函数的修饰符是public: 公共的 为何不用private 等等的修饰符 而规定只用public呢? ...

  9. 美团点餐—listview内部按钮点击事件

    PS:长时间不写博客了,今天来写一下美团的这个点餐界面,今天先写一个加号减号的接口调用,下一篇是整体,有点菜,评价,商家,还有左边的listview和右边的展示项.进入这篇正题,像listview,G ...

  10. 深度学习之 GAN 进行 mnist 图片的生成

    深度学习之 GAN 进行 mnist 图片的生成 mport numpy as np import os import codecs import torch from PIL import Imag ...