客户端会话跟踪技术 Cookie 浅谈

news2024/11/19 11:20:32

文章目录

  • 前言
  • 为什么之前浏览器和服务器不支持数据共享?
  • 会话跟踪技术
  • Cookie的概念
  • Cookie的工作流程
  • Cookie的基本使用
  • Cookie原理分析
  • Cookie的存活时间
  • Cookie存储中文

前言

用户打开浏览器,第一次访问 Web 服务器资源时,会话建立,直到有一方断开了连接则会话结束,例如浏览器或者服务器断开。在一次会话中可以包含多次的请求和响应。

上述的整个过程称为会话。

例如,当我们在浏览器访问一个网站时,浏览器和这个网站服务器就建立了一次会话,后面在这个网站中的所有操作都属于这一次会话,当我们关闭浏览器程序或者服务器关闭则会话结束。

现实中,服务器会被多个用户同时访问,为了识别多次请求是否来自同一个浏览器,在一次会话的多次请求间共享数据,出现了会话跟踪技术。会话跟踪技术是一种维护浏览器状态的方法,服务器识别浏览器的过程就被称为会话跟踪。

例如,实现购物车的功能中,第一次请求,用户将商品加入购物车,下一次请求,用户去购物车结算,第二次请求需要展示前一次添加到购物车中的商品,此时就要用到数据共享。再比如说页面展示用户的登录信息,网站登录页面记住密码等功能,都会用到数据共享。

为什么之前浏览器和服务器不支持数据共享?

之前说过,浏览器和服务器之间使用 HTTP 协议请求来传输数据,而 HTTP 协议是无状态的,也就是说浏览器发起的两次请求是毫不相干的,,每次浏览器向服务器发起请求时,服务器都会将该请求视为新的请求。

HTTP 协议之所以无状态,是因为该协议想让每次请求之间相互独立,互不影响,提高了性能,但是也伴随着多次请求之间数据无法共享的问题,而会话跟踪技术正是解决了这个难题。

会话跟踪技术

我们有两种方式来实现会话跟踪技术,分别是客户端会话跟踪技术 Cookie 和服务器会话跟踪技术 Session。其中 Cookie 是存储在客户端浏览器的,而 Session 是存储在服务器端的。两者各有利弊,接下来我们可以从两者的原理,使用等一同探讨。

什么是 Cookie,Cookie 是如何实现的?如何使用?接下来带着这些问题深入研究。

Cookie的概念

Cookie 是指客户端会话跟踪技术,其特点是将数据保存到客户端,以后每次请求都会携带 Cookie 数据进行访问。

Cookie的工作流程

浏览器发送 HTTP 请求给 Web 服务器资源时,服务器资源接收请求并进行业务处理,在这个过程中会创建一个 Cookie 对象,并将请求参数中的数据存入 Cookie。服务器响应数据时会把 Cookie 对象响应给浏览器,浏览器接收到响应后,会把 Cookie 中的数据存放到浏览器内存中,在同一次会话中浏览器再一次发送请求给 Web 服务器资源时,会携带 Cookie 对象中的所有数据。此时就实现了同一会话的不同请求之间的数据共享。

例如:

image-20230217142149288

如上图,浏览器第一次访问 Web 服务器时,会话建立,那么如何实现一次会话的多次请求之间的数据共享呢?

浏览器发送 HTTP 请求 1 给服务器,服务器 Servlet 1 接收请求并进行业务处理,在处理过程中创建 Cookie 对象并将数据 name=zhangsan 存入 Cookie 。响应数据时,Cookie 对象被响应到浏览器,浏览器接收到响应数据会把 Cookie 对象中的数据存放到浏览器内存中,此时会话建立。

在同一次会话中,浏览器发送 HTTP 请求 2 给服务端 Servlet 2,此时会携带 Cookie 对象中所有的数据。 Servlet 2 接收到请求和数据后,就可以获取到 Cookie 对象中的数据,实现了一次会话中多次请求的数据共享。

Cookie的基本使用

对于 Cookie 的使用,我们主要关注后台代码对 Cookie 的操作,Cookie 的操作主要分为发送 Cookie 和接收 Cookie。

发送 Cookie:

创建 Cookie 对象:

Cookie cookie = new Cookie("key","value");

发送 Cookie 到浏览器:

response.addCookie(cookie);

下面练习将 Cookie 发送到客户端浏览器。

第一步:

创建 Maven Web 项目,命名为 cookie-demo,在 pom.xml 中添加相关依赖。

image-20230217143927444

  <dependencies>
    <!--servlet-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>
    <!--jsp-->
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.2</version>
      <scope>provided</scope>
    </dependency>
    <!--jstl-->
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <dependency>
      <groupId>taglibs</groupId>
      <artifactId>standard</artifactId>
      <version>1.1.2</version>
    </dependency>
  </dependencies>
  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.tomcat.maven</groupId>
        <artifactId>tomcat7-maven-plugin</artifactId>
        <version>2.2</version>
      </plugin>
    </plugins>
  </build>

第二步:编写 Servlet,编码:

@WebServlet("/servletA")
public class ServletA extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //创建Cookie对象
        Cookie cookie = new Cookie("name", "zhangsan");
        //通过response发送Cookie对象
        response.addCookie(cookie);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

第三步:启动服务器,在浏览器中访问对象的服务器资源。

不难发现,此时响应数据中已经携带了 Cookie 的数据,如图:

image-20230217145741252

浏览器中存储的 Cookie 数据怎么查看呢?一般情况下我们可以通过浏览器的设置查看,在不同的浏览器设置中一般都有 Cookie 选项,我们发现其中就存放了很多的 Cookie 数据。如图:

image-20230217150550165

同样的我们也可以通过 F12 开发者工具查看,如图:

image-20230217150152815

获取 Cookie:

获取客户端携带的所有 Cookie:

Cookie[] cookie = request.getCookies();

使用 Cookie 对象方法获取数据:

cookie.getName();
cookie.getValue();

我们只需要遍历数组对象,并且使用 Cookie 对象方法,便可以获取每一个 Cookie 对象对应的值。

下面练习获取浏览器请求中的 Cookie 数据。

第一步:编写一个 Servlet,命名为 ServletB,编码:

@WebServlet("/servletB")
public class ServletB extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取Cookie数组
        Cookie[] cookies = request.getCookies();

        //遍历数组对象
        for(Cookie cookie:cookies){
            //获取数据
            String name = cookie.getName();
            if("name".equals(name)){
                String value = cookie.getValue();
                System.out.println(name+":"+value);
                break;
            }
        }
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

第二步:在浏览器访问对应的资源,此时控制台输出了从浏览器获取的 Cookie 对象的值。如图:
image-20230217152526678

在一次会话中,我们使用浏览器访问了两个不同的资源 ServletA 和 ServletB,并且实现了数据的共享。当我们关闭浏览器重新启动后访问 ServletB,此时会发现我们已经无法访问到 name:zhangsan 这条数据了。

Cookie原理分析

Cookie 的实现是基于 HTTP 协议的,其中涉及到了下面两个信息:

  • 响应头:set-cookie
  • 请求头:cookie

例如在上面的案例中:

image-20230217153715432

我们在前面的案例中使用 request 在 ServletB 中获取到了 Servlet 响应给浏览器的数据,在同一会话的两次请求之间实现了数据共享。

在 ServletA 响应数据时,Tomcat 服务器是基于 HTTP 协议来实现的,当 TomCat 发现要响应一个 Cookie 对象时,就会在响应头重添加数据:

set-Cookie:name=zhangsan

浏览器获取当响应结果后,从响应头中获取到对应的值 name=zhangsan ,并将数据存储在浏览器内存中。

在同一次会话中,浏览器发送 HTTP 请求给 ServletB,浏览器会自动在请求头中添加:

Cookie:name=zhangsan

服务器接收到浏览器的请求,Request 对象会将请求头中的 cookie 对应的值封装为 Cookie 对象,存放在数组中。此时我们就可以根据需求获取数据。

例如:

访问 ServletA 时,查看响应头数据如下:

image-20230217155018177

访问 ServletB 时,查看请求头数据:

image-20230217155118242

Cookie的存活时间

思考:

前面我们通过 ServletA 响应了存放 name=zhangsan 的 Cookie 对象给浏览器,浏览器接收响应数据并将 Cookie 数据存放到浏览器内存中,通过浏览器再次发送 HTTP 请求给 ServletB,并且使用 Response 对象获取了 Cookie 数据,那么在向 ServletB 发送请求之前,如果我们将浏览器彻底关闭并重新打开,还能通过 ServletB 获取到 Cookie 数据吗?

通过测试不难发现,如果将浏览器彻底关闭再次打来访问 ServletB 时,我们无法获取 Cookie 对象数据。

Cookie 的存活时间是指从创建到销毁的整个时间,那么 Cookie 对象能存活多久呢?

因为 Cookie 存放在浏览器内存中,所以在默认情况下,如果浏览器关闭,内存释放,此时 Cookie 就会被销毁。这也是为什么案例中我们再次打开浏览器无法获取 Cookie 的原因。

但是,有时我们需要 Cookie 的数据持久化存储,例如在实现登录时记住我的功能时,我们希望再次打开浏览器访问登录页面时,数据能被重新获取。Cookie 提供了对应的 API 来解决这个问题,我们可以通过 setMaxAge() 方法来设置 Cookie 的存活时间。

setMaxAge(int seconds)

参数为存活的秒数,通过设置其参数来控制 Cookie 的存活时间:

  • 正数:将 Cookie 写入浏览器所在的电脑硬盘吗,持久化存储,到指定时间后自动删除
  • 负数:默认值,存放在浏览器内存中,浏览器关闭,内存释放,Cookie 销毁
  • 零:删除对应的 Cookie

示例:

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //创建Cookie对象
        Cookie cookie = new Cookie("name", "zhangsan");
        //设置Cookie存活时间
        cookie.setMaxAge(60*60*24*7);
        //通过response发送Cookie对象
        response.addCookie(cookie);
    }

设置完 Cookie 存活时间后,我们重启服务器,在浏览器访问 ServletA,重启浏览器,再次访问 ServletB,此时不难发现,Cookie 数据能够被获取到,说明 Cookie 并没有因为浏览器内存释放而销毁。

在浏览器设置中我们也可以看到,有些 Cookie 数据甚至设置存放一年之久。如图:

image-20230217162423038

Cookie存储中文

其实在之前的案例中,如果我们设置的参数值为中文的话,在浏览器访问时会被提示错误信息的,因为 Cookie 是不能直接存储中文的。那么如果我们有存储中文的需求时该怎么解决这个问题呢?

这里就又要用到 URL 编码,具体怎么实现呢?

例如上面的例子中,在 ServletA 中响应 Cookie 数据时,对中文数据进行 URL 编码,并且将编码后的数据存放到 Cookie 中,在 Servlet 中获取 Cookie 的值时,只需要附加的进行 URL 解码,变不会出现中文乱码的问题。

示例:

第一步:在 ServletA 中进行 URL 编码:

@WebServlet("/servletA")
public class ServletA extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //数据
        String s = "张三";
        //URL编码
        String encode = URLEncoder.encode(s, "utf-8");
        System.out.println(encode);
        //将编码后的数据存放到Cookie中
        Cookie cookie = new Cookie("name", encode);
        //设置Cookie存活时间
        cookie.setMaxAge(60*60*24*7);
        //通过response发送Cookie对象
        response.addCookie(cookie);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

访问服务器资源,如图:

image-20230217163947323

第二步:在 ServletB 中进行 URL 解码:

@WebServlet("/servletB")
public class ServletB extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取Cookie数组
        Cookie[] cookies = request.getCookies();

        //遍历数组对象
        for(Cookie cookie:cookies){
            //获取数据
            String name = cookie.getName();
            if("name".equals(name)){
                //获取数据
                String value = cookie.getValue();
                //URL解码
                value = URLDecoder.decode(value, "utf-8");
                System.out.println(name+":"+value);
                break;
            }
        }
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

访问服务器资源,如图:

image-20230217164016157

此时,在控制台打印了没有乱码的中文数据。如图:

image-20230217164858873

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409212.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

富文本编辑器Quill 介绍及在Vue中的使用方法

在Web开发中&#xff0c;富文本编辑器是不可或缺的一个功能组件&#xff0c;掌握少量基础语法就能让一篇文章实现较为不错的排版效果&#xff0c;即见即所得。 目前市场上已提供大量集成富文本编辑器的包&#xff0c;Quill 作为其中一个&#xff0c;以简单、易上手特点&#x…

vue项目打包失败问题记录

项目"vue": "^2.7.14"版本 起因&#xff1a;项目里安装了openlayers最新版本的地图插件&#xff0c;打包会成功&#xff0c;但是打包页面会有红色提示 刚开始根据红色提示百度找到相同错误的方法提供了的一系列提示安装啊&#xff0c;卸载&#xff0c;装了…

【WebSocket 协议】Web 通信的下一步进化

标题【手动狗头&#x1f436;】&#xff0c;大佬轻饶 目录一、什么是 WebSocket ?二、WebSocket 应用场景?三、代码中的 WebSocket四、一个完美的案例&#xff1a;在线聊天程序实现服务器chat/index.js实现客户端chat/index.htmlchat/style.css最终效果WebSocket 是基于单个 …

关于elementUI表单的清除验证以及复合型输入框

目录 一、清除表单的验证 问题的发生以及解决过程 代码 总结 二、复合型输入框——查询&#xff08;前置和后置都有的&#xff09; 问题的发生以及解决过程 代码 展示 一、清除表单的验证 问题的发生以及解决过程 表单弹窗关闭后再打开会出现上一次的验证信息提示&am…

JS中如何判断一个值是否为Null

前言 在鉴别JavaScript原始类型的时候我们会用到typeof操作符。Typeof操作符可用于字符串、数字、布尔和未定义类型。但是你运行typeof null时&#xff0c;结果是“object”(在逻辑上&#xff0c;你可以认为null是一个空的对象指针&#xff0c;所以结果为“object”)。 如何判…

Vue3【计算属性、Class绑定、Style绑定 、侦听器、表单输入绑定、模板引用、组件注册方式、组件嵌套关系 、组件注册方式】(三)-全面详解(学习总结---从入门到深化)

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是小童&#xff0c;Java开发工程师&#xff0c;CSDN博客博主&#xff0c;Java领域新星创作者 &#x1f4d5;系列专栏&#xff1a;前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶 &#x1f4…

一个小项目带你了解vue框架——TodoList(简单实用易上手)

写在前面 你是否还在为繁杂的事情感到头昏脑涨&#xff1f;你是否还在将便利贴贴满整个桌面&#xff1f;本文就为你解决这个烦恼&#xff0c;使用vue框架做一个TodoList&#xff0c;将事情整理的井井有条不再是一个遥不可及梦&#xff01;让我们行动起来吧&#xff01; 基于vue…

解决前端项目问题,uniapp运行微信开发工具小程序,出现× initialize报错,以及浏览器无法运行

项目场景&#xff1a; uniapp进行小程序以及多端web页面都不知道如何配置讲项目运行起来。 就会报出无法运行错误。 [微信小程序开发者工具] - initialize [微信小程序开发者工具] [微信小程序开发者工具] IDE may already started at port , trying to connect如图 问题描…

微信小程序前端解密获取手机号

微信小程序在获取用户手机号时安全正确的做法是把获取的iv等信息传递给后端&#xff0c;让后端解密&#xff0c;再提供接口返回给前端。 但是遇到一下比较一般的后端或者懒的后端的话&#xff0c;前端也可以考自己完成手机号解密。 1.使用授权手机号组件按钮 <view class&…

【Vue】Cannot set reactive property on undefined,null,or primitive value:undefined

一、背景描述技术栈&#xff1a;vue element报错内容&#xff1a;Cannot set reactive property on undefined, null, or primitive value:undefined如下图所示&#xff1a;二、报错原因根据报错内容翻译一下&#xff0c;就是不能对 undefined,null 或者原始值为 undefined 的…

uniapp中怎么使用easycom 自定义组件

一、全局注册 uni-app 支持配置全局组件&#xff0c;需在 main.js 里进行全局注册&#xff0c;注册后就可在所有页面里使用该组件。 Vue.component 的第一个参数必须是静态的字符串。nvue 页面暂不支持全局组件。 二、局部注册 局部注册之前&#xff0c;在需要引用该组件的…

详解Promise使用

Promise引入PromiseExecutorresolve不同值的区别then方法catch方法finally方法resolve类方法reject类方法all类方法allSettled方法race方法引入Promise 我们调用一个函数&#xff0c;这个函数中发送网络请求(我们可以用定时器来模拟)&#xff1b; 如果发送网络请求成功了&…

前端面试题 | 什么是回流和重绘?它们的区别是什么?

在了解回流和重绘之前我们可以先简单了解一下浏览器的渲染过程~ 1. 解析获取到的HTML&#xff0c;生成DOM树&#xff0c;解析CSS&#xff0c;生成CSSOM树 2. 将DOM树和CSSOM树进行结合&#xff0c;生成渲染树&#xff08;render tree&#xff09; 3.根据生成的渲染树&#xff0…

Vue开发环境安装

目录 Vue概述&#xff1a; Vue特点&#xff1a; Vue官网: 一、node.js安装和配置 1. 下载安装node.js Step1&#xff1a;下载安装包 Step2&#xff1a;安装程序 Step3&#xff1a;查看 问题解决&#xff1a; 解决npm warn config global --global, --local are depr…

Session详解

&#x1f451; 博主简介&#xff1a;    &#x1f947; Java领域新星创作者    &#x1f947; 阿里云开发者社区专家博主、星级博主、技术博主 &#x1f91d; 交流社区&#xff1a;BoBooY&#xff08;优质编程学习笔记社区&#xff09; 前言&#xff1a;上节我们详细讲解了…

华为云从入门到实战 | 云服务概述与华为云搭建Web应用

云计算在快速发展过程中逐渐形成了不同的服务模式(Service Model)。根据云计算最终服务的交付形态主要分为3种类型,软件即服务、平台即服务与基础架构即服务。从根源上来说,云计算的服务模式来源于面向服务的架构SOA(Service-Oriented Architecture)。所谓SOA,就是一种架构设…

npm install或npm i后没有依赖包node_modules?

今天git clone一个项目发现npm i后发现自己的文件下面没有node_modules包&#xff0c;但是有如图提示&#xff1a;但是文件夹下没有任何新增文件 added 1 package in 674ms 随后查看了C:\Users\俊\AppData\Roaming\npm\node_modules 图一&#xff1a; 里面存在今天执行npm i…

微信小程序实训|基于云数据库的语文听写工具

本实训项目结合云开发的云数据库和 “微信同声传译”插件&#xff0c;制作一个可真实运营的小学生语文听写工具&#xff0c;页面效果如图1所示。 ▍图1 “听写小助手”页面 基于云开发的微信小程序具有众多优势&#xff0c;云开发模式真正解放了开发者&#xff0c;使得开发效率…

Vue3全家桶入门 (通过vue-cli脚手架搭建todolist项目环境,深入vue3.0核心知识)

目录 一、todolist项目准备 vue3.0环境搭建&#x1f344; 二、todolist基本结构 1. 定义组件&#x1f437; 2.实现todolist需要用到的四个组件 &#x1f436; 3.ref定义单个数据 &#x1f42d; 4.reactive定义对象类型的数据&#x1f439; 5. 实现todolist每个组件需要…

前端实战【ES6】你会ES6,但是你真的会用吗?

目录&#x1f31f;前言&#x1f31f;关于取值&#x1f31f;关于合并数据&#x1f31f;关于拼接字符串&#x1f31f;关于if中判断条件&#x1f31f;关于列表搜索&#x1f31f;关于扁平化数组&#x1f31f;关于获取对象属性值&#x1f31f;关于添加对象属性&#x1f31f;关于输入…