聊一下不一样的 cookie 和 session ? 进来看看你了解多少

728 阅读5分钟

这是我参与8月更文挑战的第14天,活动详情查看:8月更文挑战

首先来简单聊下会话控制

  • http协议的缺陷:

       无状态,就是无记忆,不能让同一浏览器和服务器进行多次数据交换时,产生业务的连续性。
    
  • 什么是会话控制:

     会话控制就是解决http无记忆的缺陷的。
     能够将数据持久化的保存在客户端(浏览器)或者服务器端,从而让浏览器和服务器进行多次数据交换时,产生连续性。
    
  • 会话控制的分类

       cookie: 将数据持久化保存到客户端(浏览器)
       session: 将数据持久化保存到服务器端
    

1. cookie技术

1.1 什么是cookie

  • cookie是将数据持久化存储到客户端的一种技术。
  • 网站可以将数据写到浏览器中, 一个网站最多能在一个浏览器写20个cookie。现在的浏览器能写的更多
  • 一个浏览器能够设置的总cookie数最多为300个,每个不能超过4kb。
  • cookie既能保存在文件中,也能保存在内存中。

cookie应用实例 --- 千人千面(猜你喜欢)

02.png

1.2 设置cookie

  • 核心: cookie是随着响应头返回给浏览器的

  • 设置cookie的核心思想: 使用 res.setHeader 或者 writeHeader 将cookie信息设置在响应头中

  • cookie设置格式:key=value;expires=time

    • key: cookie的名称
    • value: 名称对应的值
    • expires: 有效期
//1. 使用 setHeader 方法
res.setHeader('set-cookie', 'id=101');                   //设置单个cookie
res.setHeader('set-cookie', ['id=101', 'name=zs']);      //设置多个cookie

//2. 使用 writeHeader 方法
res.writeHeader(200, {
    'content-type': 'text/html;charset=utf-8',
    'set-cookie': ['type=10', 'name=my']
});

//3. 使用 set 方法,该方法是express封装的方法
res.set({'set-cookie':['goodsName=xiaomi 6', 'goodsPrice=3999']});

//4. 设置cookie时,指定有效期
//注意:要使用UTC时间,使用 toUTCString()方法转换
//设置有效期为 1小时
const expiresTime = new Date(Date.now() + 3600000).toUTCString();
res.set({'set-cookie':['goodsName=xiaomi 6;expires=' + expiresTime, 'goodsPrice=3999']})

1.3 读取cookie

当网站已经给浏览器设置好cookie之后,浏览器再次请求网站的路由时,就会将cookie信息随请求头一起发送给服务器。

1550717326882.png

//node提供了系统模块 querystring 能够帮助我们将cookie字符串拆分为对象
const qs = require('querystring');
const obj = qs.parse('id=10001;name=zs', ';', '=');
console.log(obj);   // {id:10001, name:"zs"}

1.4 cookie有效期

  • 设置了expires则有效期到expires指定的时间
  • 未设置expires则关闭浏览器cookie即消失
const time = new Date(Date.now() + 3600000).toUTCString();
res.setHeader('set-cookie', 'width=500;exprires=' + time)

//一天
new DateDate.now() + 3600000 * 24);

//一周
new DateDate.now() + 3600000 * 24 * 7);

2. session技术

2.1 session介绍

  • 因为cookie是保存在客户端的数据,不够安全,所以出现了session。
  • session会将数据保存到服务器端(保存在文件、内存服务器或数据表中),安全性就可以得到保证。

2.2 设置/读取session

express设置session时,需要使用第三方模块 --- express-session

npm i express-session

使用步骤:

  1. 加载 express-session 模块
  2. 将session注册为中间件
  3. 使用req.session对象设置/读取session
//1. 加载 express-session 模块
const session = require('express-session');
//2. 配置项
const obj = {
    secret: '4ey32erfyf3fgpg',   //加密字符串。 使用该字符串来加密session数据,自定义
    resave: false,               //强制保存session即使它并没有变化
    saveUninitialized: false     //强制将未初始化的session存储。当新建了一个session且未
    							 //设定属性或值时,它就处于未初始化状态。
};
//3. 注册为express-session中间件
app.use(session(obj));

//4. 使用 req.session.属性 = 值  方式来设置session
app.get('/sets', (req, res) => {
    req.session.isLogin = true;
    req.session.userInfo = {user_id:10001, user_name:"zs"};
    //注意:一定要将数据发回给浏览器,否则session无法生效
    res.send('设置session');
});

//设置好之后,req.session中的结构
req.session = {
    isLogin: true,
    userInfo: {user_id:10001, user_name:"zs"}
}

2.3 session有效期

  • 当浏览器关闭后,session消失
  • express-session会将session保存在内存中,每次重启服务器时即使没有关闭浏览器session也会消失

2.4 删除session

核心: req.session.destroy() 销毁所有session

2.5 session 的有效范围

在一个网站中设置了session,则整个网站都能找到这个session

3. cookie和session的原理

3.1 cookie原理

  1. 浏览器第一次访问带有cookie设置的路由时,服务器会将cookie信息通过响应头返回给浏览器
  2. 之后浏览器每次访问服务器时都会将cookie信息通过请求头发送给服务器

3.2 session原理

4.png 0. 浏览器第一次访问带有session设置的路由时,服务器会自动产生一个sessionId(一个很长的随机字符串),该sessionId有两个作用

① 随着cookie返回给浏览器,保存在浏览器中 (==相当于一把钥匙==)

② 在服务器开辟一块内存并以该sessionId命名,将数据保存在该内存中 (==相当于一个箱子==)
  1. 浏览器之后每一次访问服务器时,sessionId都会随着请求头发送给服务器,服务器就能根据sessionId

往期精彩推荐

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

我在工作中是如何使用 git 的

面试相关推荐

前端万字面经——基础篇

前端万字面积——进阶篇

更多精彩详见:个人主页