页面间固定参数,通过cookie传值的实现方法

最后在做的页面，比如用户数据（用户头像，名称，年龄）这些信息，因为大部分页面都要用，之前是通过url地址传，另一页面接收。考虑到这样做会让url过长，因此，尝试使用cookie，把固定的值保存在cookie，其它页面拿出来就可以使用。

在此之前，先写通过url传值与取值的过程。url通过跳转页面，给跳转页的url问号后拼接参数的方法传值：

//问号后的userId / dialogId都是要传的参数
//如果有多个参数，就用“&”拼接
window.location.href = 'doctor_ask.html?userId=' + userId + "&dialogId=" + dialogId;

在doctor_ask.html页面，把在url中的参数取下来，要使用一个方法getQueryString()，其中有一个方法是用来获取url中含有中文参数的：

/* 获取url后的某一个query的值 */
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 "请选择";
}

使用方法获取参数：

//调用方法获取参数，方法中的参数名是一个字符串
var userId = getQueryString('userId')

第二种，通过cookie方法传值，我这里使用的是jQuery cookie，因此需要先加载jQuery与cookie:

<!--使用cookie-->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.changer.hk/jquery/plugins/jquery.cookie.js"></script>

在其中一个页面，比如首页，将要保存的值存放在cookie.

如果仅是一个id，直接使用键值对的方法保存即可：

//将id保存在cookie
$.cookie('doctorId', '11916111-f2eb-11e4-b756-f40669963d49');
//从cookie中取出id
var doctorId = $.cookie('doctorId');

如果是多个值，需要将多个值放在对象中，保存这个对象：

//将多个值存放在对象中
var userData = {
  userId: "11916122-f2eb-11e4-b756-f40669963d49",
  patientName: "张丽",
  patientAge: 23,
  patientSex: "F"
}
//将这个对象保存在cookie,它的键是对象名称，值为JSON.stirng()，目的是将这个对象解析为字符串，因为cookie的键与值都是字符串
$.cookie('userData' , JSON.stringify(userData));

如果在其它页面使用这个cookie中对象，可以取出这个对象并将对象转换为字符串

var userData = $.cookie('userData');
if(userData){
//JSON.parse() 将字符串解析为对象，方便使用
  userData = JSON.parse(userData);
};

两个知识点：

//字符串解析为对象
JSON.parse(对象名称);
//对象解析为字符串
JSON.stringify(对象名称);

以上这篇页面间固定参数,通过cookie传值的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • C#实现.net页面之间传值传参方法汇总

    本文实例总结了C#实现.net页面之间传值传参方法.分享给大家供大家参考.具体实现方法分析如下: 一.QueryString传值 一般来说,QueryString是一种非常简单的传值方式,他可以将传送的值显示在浏览器的地址栏中.如果是传递一个或多个安全性要求不高或是结构简单的数值时,可以使用这个方法.但是对于传递数组或对象的话,就不能用这个方法了.如下面实例所示: 复制代码 代码如下: private void Button1_Click(object sender, System.EventA

  • javascript静态页面传值的三种方法分享

    一:JavaScript静态页面值传递之URL篇能过URL进行传值.把要传递的信息接在URL上.Post.htm 复制代码 代码如下: <input type="text" name="username"><input type="text" name="sex"><input type="button" value="Post"><script

  • asp.net中使用cookie传递参数的方法

    本文实例讲述了asp.net中使用cookie传递参数的方法.分享给大家供大家参考.具体如下: //传值 HttpCookie cookie = new HttpCookie("mycookie"); cookie.Value = "cookie值"; Response.AppendCookie(cookie); Response.Redirect("index.aspx"); //接收 Request.Cookies["mycooki

  • 页面间固定参数,通过cookie传值的实现方法

    最后在做的页面,比如用户数据(用户头像,名称,年龄)这些信息,因为大部分页面都要用,之前是通过url地址传,另一页面接收.考虑到这样做会让url过长,因此,尝试使用cookie,把固定的值保存在cookie,其它页面拿出来就可以使用. 在此之前,先写通过url传值与取值的过程.url通过跳转页面,给跳转页的url问号后拼接参数的方法传值: //问号后的userId / dialogId都是要传的参数 //如果有多个参数,就用"&"拼接 window.location.href

  • PHP页面间传递参数实例代码

    首先给大家介绍如何通过表单传值查询数据. 任务目标:在表单中输入部门名,查询出相应部门的人员信息. 先创建search.php文件. 第一步,插入一表单,在其中包含一个输入框,一个提交按钮.search.php文件内容如下所示: 复制代码 代码如下: <html>  <head>  </head>  <body>  <h3>Search</h3>  <form action="search_result.php&quo

  • JSP页面间的传值方法总结

    前言 JSP 页面间传递参数是项目中经常需要的,这应该算是 web 基本功吧.试着将各种方式总结下来,需要时可以进行权衡利弊选择最合适的方式.下面来一起看看详细的介绍: 1. URL 链接后追加参数 <a href="next.jsp?paramA=A&paramB=B..." rel="external nofollow" >URL 后面追加参数</a> <jsp:include page="next.jsp&quo

  • ASP中Web页面间的数据传递方式

    摘要:基于web的动态网页设计必会涉及到页面间的数据传递,文章探讨了asp设计中常用的web页面间的数据传递方式,分析各种数据传递方式的使用方法.使用场合及优缺点,其都是设计阶段选择数据传递方式考虑的关键. 关键词 数据传递变量浏览器端网页 往往使用动态网页技术制作asp应用程序时一般至少拥有二个或二个以上的web页面,这时就得考虑在多个web页面间传递数据的处理工作.而asp应用程序的各个页面类似于windows应用程序的form窗体,windows应用程序各form间数据传递可以通过定义全局

  • 微信小程序页面间跳转传参方式总结

    微信小程序页面间跳转传参方式总结

    前言 在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式:URL传参.缓存和方法调用. URL传参 这种方式是最简单也是最常用的,这里就不做过多介绍了. 缓存 虽然URL传参比较简单易用,但也有局限性,就是只能传递简单参数,对于复杂的参数就显得无能为力了,但很多时候我们需要传递的是结构比较复杂的数据,这时候很多开发者都会想到用缓存. 使用缓存我们有两种方式:小程序自带Storage和vuex.因为我们的项目是基于mpvue的,顺带也用了vuex了 St

  • Vue 页面状态保持页面间数据传输的一种方法(推荐)

    Vue 页面状态保持页面间数据传输的一种方法(推荐)

    如果大家觉得有用,更多的模块请 点击查看 vue router给我们提供了两种页面间传递参数的方式: 动态路由匹配 编程式的导航 // 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 下面介绍一下 vue-viewplus 一个简化Vu

  • JAVASCRIPT实现的WEB页面跳转以及页面间传值方法

    但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能. 下面是具体的做法: 一:跳转到新页面,并且是在新窗口中打开时: 复制代码 代码如下: function gogogo() { //do someghing here... window.open("test2.html"); } window是一个javascript对象,可以用它的open方法,需要注意的是,如果这个页面不是一相相对路径,那么要加http://,比如: 复

  • asp.net Context.Handler 页面间传值方法第1/2页

    一.目前在ASP.NET中页面传值共有这么几种方式: 1.表单提交, <form action= "target.aspx" method = "post" name = "form1"> <input name = "param1" value = "1111"/> <input name = "param2" value = "2222&quo

  • asp.net 页面间传值方法小结

    1.表单提交, 复制代码 代码如下: <form action= "target.aspx" method = "post" name = "form1"> <input name = "param1" value = "1111"/> <input name = "param2" value = "2222"/> </for

  • Angular页面间切换及传值的4种方法

    本文实例为大家分享了Angular JS页面间切换及传值 的方法,供大家参考,具体内容如下Angular JS页面间切换及传值 1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数传过去. state('producers', { url: '/produ

随机推荐