前端使用JQuery在页面之间传递参数，cookie与session与sessionStorage，多行添加点击事件

最新推荐文章于 2023-10-31 12:39:43 发布

无名一小卒

最新推荐文章于 2023-10-31 12:39:43 发布

阅读量3.8k

点赞数

文章标签： jq前端参数传递

本文链接：https://blog.csdn.net/h1025372645/article/details/90732692

版权

JQuery前端参数传递专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用场景

在开发管理信息系统与商城网站时，会涉及到查看某个选项中信息

如在购物商城中查看某个商品的详细信息，或者在管理信息系统中查看某个信息的详细信息

那么，如何在前端把所需数据从一个页面传入到另外一个页面中

此处两个页面的跳转，与后端是完全没有关系的

实现方法如下

方法一：使用url传递参数，在详情页获取url并实现参数截取

定义一个表格，手动添加几行，在跳转的链接中，将要传入detial.html的数据拼接在url后面

点击跳转的同时，参数也会在地址栏里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<table id="test123">
    <tr>
        <td><a href="detial.html?id=1" >我是1</a></td>
    </tr>
    <tr>
        <td><a href="detial.html?id=2">我是2</a></td>
    </tr>
    <tr>
        <td><a href="detial.html?id=3">我是3</a></td>
    </tr>
    <tr>
        <td><a href="detial.html?id=4">我是4</a></td>
    </tr>
</table>
</body>
</html>

通过下图可以看到，此处id这个参数已经拼接到了地址栏后面，下一步要做的工作就是从地址栏中取出该参数

那么如何将自己需要的参数从url中取出来，此处使用了正则表达式来实现

函数getQueryString（）实现的功能就是，将想要获取的数据的值，当做参数传入

然后将需要的数据返回，此处传递的是id，想要获取的数据就是id的值

在跳向这个页面时，h标签中的值会变为相应的id的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="test">测试</h1>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
   $("#test").html(getQueryString("id"))
   //正则表达式获取地址栏中的数据
   function getQueryString(name) {
       var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
       var r = window.location.search.substr(1).match(reg);
       if (r != null) return unescape(r[2]);
       return null;
   }

</script>
</html>

当获取到了想要的数据，就可以使用ajax向后台请求，查询该id用户或者商品的详细信息，并展现在前端页面中

方法二：使用SessionStorage和localstorage存储数据

sessionStorage与localStorage是html5的新特性，可以在浏览器中存储数据

sessionStorage当前会话有效，也就是当前页面有效，页面关闭后，数据就会丢失

localStorage就是长期有效，只有清除缓存或者数据时，才会被清除

使用这两个属性，相对方法一，就简单了很多

下面是列表页面代码，使用了sessionStorage，localStorage的使用方法与sessionStorage的使用方法是一样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<table id="test123">
    <tr>
        <td class="test">我是1</td>
        <td id="id1">1</td>
    </tr>
    <tr>
        <td class="test">我是2</td>
        <td id="id2">2</td>
    </tr>
    <tr>
        <td class="test"> 我是3</td>
        <td id="id3">3</td>
    </tr>
    <tr>
        <td class="test">我是4</td>
        <td id="id4">4</td>
    </tr>
</table>

</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
    
    $(".test").click(function () {
        var id =  $(this).siblings("td").html();  //获取兄弟td元素中的值
        sessionStorage.setItem("id",id);          //将数据存入sessionStorage
        location.href = "detial.html";            //页面跳转
    });
    
</script>
</html>

详情页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="test">测试</h1>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
   $("#test").html(sessionStorage.getItem("id"))   //从sessionStorage中获取数据
   sessionStorage.removeItem("id");                //使用后移除该数据
</script>
</html>

方法三：使用cookie存储数据

Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。

它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”

这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

此处也可以使用cookie来存储想要传递的数据

列表代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<table id="test123">
    <tr>
        <td class="test">我是1</td>
        <td id="id1">1</td>
    </tr>
    <tr>
        <td class="test">我是2</td>
        <td id="id2">2</td>
    </tr>
    <tr>
        <td class="test"> 我是3</td>
        <td id="id3">3</td>
    </tr>
    <tr>
        <td class="test">我是4</td>
        <td id="id4">4</td>
    </tr>
</table>

</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>

    $(".test").click(function () {
        var id =  $(this).siblings("td").html();  //获取兄弟td元素中的值
        var date = new Date();
        date.setDate(date.getDate()+7);           //设置cookie存储数据的时间
        document.cookie = "id="+id+";expirse="+date;
        location.href = "detial.html";            // 页面跳转
    });
  
</script>
</html>

详细信息页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="test">测试</h1>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
    
   $("#test").html(getCookie("id"))
   
   function getCookie(name){
       var strcookie = document.cookie;//获取cookie字符串
       var arrcookie = strcookie.split("; ");//分割
       // 遍历匹配
       for ( var i = 0; i < arrcookie.length; i++) {
           var arr = arrcookie[i].split("=");
           if (arr[0] == name){
               return arr[1];
           }
       }
       return "";
   }
</script>
</html>

Session与Cookie与SessionStorage

Session

存在服务器的一种用来存放用户数据的类HashTable结构。

session称为会话信息，位于web服务器上，主要负责访问者与网站之间的交互，当访问浏览器请求http地址时，将传递到web服务器上并与访问信息进行匹配，当关闭网站时就表示会话已经结束，网站无法访问该信息了，所以它无法保存永久数据，我们无法访问以及禁用网站

对会话session的认识一般都是从后台的session开始的，比如Java的session，它是基于往cookie写入一个JSESSIONID来实现的，所以，只要你不是打开一个隐身窗口，无论你开多少个标签页，不同标签页之间都会被认为是一个session，你在这个标签页登录了，新开一个标签输入地址，仍然是登录状态。

Cookie

是服务器在本地机器上存储的小段文本并随每一个请求发送至同一服务器，是在客户端保持状态的方案。

位于用户的计算机上，用来维护用户计算机中的信息，直到用户删除。

SessionStorage

webstorage包含SessionStorage与localStorage

localStorage、sessionStorage、Cookie共同点：都是保存在浏览器端，且同源的。

Session与SessionStorage区别

HTML5中的这个sessionStorage和传统后台的session并不完全是同一个东西，主要是在多个标签页数据是否会共享的问题上的不同。

Session底层实现是cookie

参考链接：

https://baijiahao.baidu.com/s?id=1619095369231494766&wfr=spider&for=pc

https://blog.csdn.net/liyifan687/article/details/80077928

https://segmentfault.com/a/1190000012057010

http://blog.haoji.me/aboute-session-storage.html

如何添加多个html元素

在上面的案例中，表格有很多行，都是手动添加，可以使用以下方法，来为一个html元素添加多个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<table id="test123">
 
</table>

</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
    handleDepartmentList();
    function handleDepartmentList() {
        //此处的&userName与&userId没有任何意义，row对象可以理解为一个字符串
        //遍历是对字符串进行了替代的操作
        var row = '<tr>' +
            '<td>&userName</td>' +   
            '<td >&userId</td>'+
            '</tr>';

        var allHtml = "";
        for(var i =0;i<4;i++){
            var row_ = row.replace("&userName","我是"+i)
                .replace("&userId",i);
            allHtml +=row_;
        }
        $("#test123").html(allHtml);
    }


</script>
</html>

运行后可以发现，为表格添加了很多行

为多行内容添加点击事件，并获取点击某行时获取该行的值

在上面的案例中，表格有很多行，那么，如何为每一行去添加点击事件

显然，要使用到class这个标签，在自动添加行的时候，为想要添加点击事件的元素添加一个class属性

再为该class属性添加点击事件，将上面的代码做如下修改就可以实现为每一行添加一个点击事件，并获取值

<script>
    handleDepartmentList();
    function handleDepartmentList() {
        var row = '<tr>' +
            '<td class="look">&userName</td>' +
            '<td >&userId</td>'+
            '</tr>';

        var allHtml = "";
        for(var i =0;i<4;i++){
            var row_ = row.replace("&userName","我是"+i)
                .replace("&userId",i);
            allHtml +=row_;
        }
        $("#test123").html(allHtml);
    }

    $("#test123").on("click",".look",function () {
       alert( $(this).siblings("td").html());
    });

</script>

在上面的代码中，可以看到，此时点击事件的添加是没有直接使用到.click的方法来添加点击事件

原因是因为直接使用.click的方法来添加点击事件时，整个js代码没有全部执行完，即页面所有DOM元素没有全部加载完

那么此时表格中是没有内容的，是空的，所以是用class属性名添加点击事件，是会失败的。

所以使用了on方法，使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

这样添加点击事件就成功了。

上述案例使用场景

上面描述的场景，可以在使用在查看个人的详细信息，查看商品的详细信息，编辑个人信息等操作

可以获取到唯一标识的数据，在跳转到另一个页面展示详细数据信息

信息是编辑还是添加

在项目中，很多时候添加页面与编辑信息页面是同一个页面

可能会有疑问，为什么添加页面与编辑信息页面是同一个页面

答案就是维护方便

那么，如何确定用户的操作时添加操作，还是编辑操作

判定方法就是通过上面案例传入的参数

当跳转到添加/编辑信息页面时，使用js对传入的参数进行获取

上面也有很多种方法来获取参数

如果获取不到参数，就说明此时用户要进行的操作就是添加操作

如果获取到了参数，说明此时用户是进行的修改信息的操作

此时再使用ajax想后台发出请求，获取用户想要查看的数据，并进行修改保存等操作。

无名一小卒

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端使用JQuery在页面之间传递参数，cookie与session与sessionStorage，多行添加点击事件

使用场景在开发管理信息系统与商城网站时，会涉及到查看某个选项中信息如在购物商城中查看某个商品的详细信息，或者在管理信息系统中查看某个信息的详细信息那么，如何在前端把所需数据从一个页面传入到另外一个页面中此处两个页面的跳转，与后端是完全没有关系的实现方法如下方法一：使用url传递参数，在详情页获取url并实现参数截取定义一个表格，手动添加几行，在跳转的链接中，将要传入de...
复制链接

扫一扫