一文讲清楚什么是服务器Session、浏览器SessionStorage和Cookie

最近作者在学习nest框架,在前端验证码实战中遇到了一些问题。为什么服务器端设置的session会保存到浏览器的cookie里?服务器端又是否会保存session数据呢?在经过大量的资料查询后,就有了这篇文章: 作者旨在用通俗易懂的语言,讲清楚什么是服务器session、浏览器的sesisonStorage和Cookies

服务器Session

简单来说,Session是服务器端存储数据的一种方式。

首先我们要区分Session和SessionStorage,这两个概念在作者初学时经常搞混,在这里我们只需要记住一句话:

Session里的数据存储到服务器端,SessionStorage里的数据存储到用户本地浏览器

如果你和作者一样,是学前端的,那么你可能会产生和作者一样的感叹:原来服务器端也能保存数据啊!在很长一段时间里,作者都以为服务器端的数据都会通过HTTP协议,存储到本地浏览器里。当时还在想,在做前端登录验证码的时候,如果在浏览器储存中找到验证码图片对应的值直接填进去,不就可以绕过验证码?

常见的登录验证码图片:

事实证明还是作者太年轻。

为什么需要Session?

回到文章,既然Session的数据存在服务器端,那为什么需要Session呢?如果要做验证码的话,需要有个地方保存验证码图片对应的值,即文本"9HZ1" ,然后前端收集到用户输入的验证码后做验证。如果这个文本值存在浏览器本地的话,那就非常容易绕过去,只需要找到存储的地方,找到对应的值就好了。

所以为了安全性,服务器端需要能够存储数据的地方,这个地方就是Session

那么除了这个用途外呢?Session还可以用来做什么呢?在深入了解这个问题前,我们先来看看Session的存储格式:

Session存储格式

Session里的数据是通过键值对的形式储存的,你可以将Session看作许多个小格子,每一个小格子都可以存储独立的数据。每一个小格子都有需要设置一个独一无二的ID,即session_id,用来标识数据,通常这个session_id是随机生成的,你也可以自定义。我们可以用一个小格子,对应一个登陆的用户:

js 复制代码
{
  "session_id": "独一无二的ID,用来标识Session",
  //存入用户id
  "user_id": 42,
  //如果用户没有登录,则为false
  "is_authenticated": true,
  //假设我们做的是电商平台,这里可以存入用户购物车的数据
  "shopping_cart": [
    {"item_id": 101, "quantity": 2},
    {"item_id": 205, "quantity": 1}
  ]
}

不知道你有没有注意到,我们在Session里面存入了用户的数据,其中有一点就是用户是否登录。要知道HTTP协议是无状态的,用户登陆前发送的Post请求和登陆后发送的Post请求没有区别。

那我们如何分辨,哪些请求是登陆前发送的,哪些请求是登陆后发送的呢?我们就可以用Sessioin来解决,通过在Session中保存用户登录状态,然后收到用户Post请求后,查询服务器本地的Session,找到用户id为42对应的Session,然后查看登陆状态是否为真。

这样我们就区分出了登录用户和未登录用户。

如何在服务器端找到当前用户对应的Session?

我们之前提到,在服务器端储存Session的每一个小格子,都有一个独一无二的session_id作为唯一标识,所以我们可以用这个session_id去找到当前用户对应的Session储存。但是这就衍生出了一个问题: 既然HTTP协议是无状态的,那我怎么知道当前Post请求就是之前那个用户发出的呢?就算我知道了当前用户就是之前登陆的用户,我又如何获取用户对应的session_id呢?

我们可以用Cookies解决这个问题:

解决思路与之前相似,既然HTTP协议是无状态的,我们把状态存储下来就好。既然不知道如何获取用户对应的session_id,那么在用户登陆后,将用户对应的session_id存储到浏览器本地,然后每次发送请求时,前端都把这个session_id携带上去,然后后端不就知道当前的请求是哪个用户发出的了吗。

后端通过前端携带的session_id,找到了服务器上存储的与用户相关的数据后,不久找到了之前用户的状态了吗?妙啊妙啊

相关推荐
轻口味7 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami10 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
吃杠碰小鸡44 分钟前
lodash常用函数
前端·javascript
emoji1111111 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235951 小时前
web复习(三)
前端
搬码后生仔1 小时前
asp.net core webapi项目中 在生产环境中 进不去swagger
chrome·后端·asp.net
凡人的AI工具箱1 小时前
每天40分玩转Django:Django国际化
数据库·人工智能·后端·python·django·sqlite