zoukankan      html  css  js  c++  java
  • 前端页面间传值之cookie传值和url传值

    大家好,我是小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 })

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

  • 相关阅读:
    高性能异步爬虫
    线程池在爬虫案例中的应用
    线程池的基本使用
    requests代理爬取
    python验证码识别
    获取人人网当前用户的个人详情页数据
    模拟登录人人网
    移远BC26基础开发之程序结构 三
    移远BC26基础开发之配置 二
    移远BC26/BC28(略)/MC20开发之环境搭建 一
  • 原文地址:https://www.cnblogs.com/H-csy/p/8295472.html
Copyright © 2011-2022 走看看