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 })

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

  • 相关阅读:
    ubuntu修改主机名称+修改终端显示目录和计算机名称
    google 搜索 PPT
    就为在YouTube上下载个视频
    读书笔记 ---- 《嵌入式系统技术》
    WARNING: Unable to open an initial console
    Ubuntu ftp服务器搭建 + UltraEdit编辑FTP文件
    51Nod 1079 中国剩余定理【模板题】
    Leetcode 11 Container with most water【双指针】
    kuangbin专题六 最小生成树【从入门到熟练】【5题】
    kuangbin专题十二 基础DP1【从入门到熟练】【10题】
  • 原文地址:https://www.cnblogs.com/H-csy/p/8295472.html
Copyright © 2011-2022 走看看