技术分享
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
    • h5项目问题总结
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)

刘誉

总有人要赢,为什么不能是我
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
    • h5项目问题总结
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)
  • js基础
  • vue入门
  • react基础入门
  • http协议
  • cookie和session
    • cookie
      • cookie 是什么
      • 分类
      • 工作原理
      • 应用
      • 使用
    • session
      • session 是什么
      • 特点
      • 工作流程
      • 使用
      • 引入
  • 跨域问题总结
  • 构造函数和原型
  • Object.create(null)和{}
  • TypeScript配置
  • Vue-Router
  • typescript入门到进阶
  • 前端
coderly
2020-04-07

cookie和session

# cookie 和 session

# cookie

# cookie 是什么

  1. 本质就是一个字符串,里面包含着浏览器和服务器沟通的信息(交互时产生的信息)
  2. 存储形式以:key - value 的形式存储
  3. 浏览器会自动携带该网站的 cookie,只要是该网站下的 cookie,全部携带。

# 分类

  1. 会话 cookie:关闭浏览器后,会话 cookie 会自动关闭,会话 cookie 存储在浏览器运行的那块内存上
  2. 持久化 cookie:看过期时间,一旦到了过期时间,自动销毁,存储在用户的硬盘上

# 工作原理

  1. 当浏览器第一次请求服务器的时候,服务器可能返回一个或多个 cookie 给浏览器。

  2. 浏览器判断以下 cookie 种类:

    • 会话 cookie
    • 持久化 cookie
  3. 以后请求该网站的时候,自动携带上该网站的所有 cookie(无法进行干预)

  4. 服务器拿到之前自己“种下的“cookie,分析里面的内容,校验 cookie 的合法性,根据 cookie 里保存的内容,进行具体的业务逻辑

# 应用

  1. 解决 http 无状态的问题(例如:7 天免登录,一般来说不会单独使用 cookie,一般配合后台的 session 存储使用)
  2. 不同的语言、不同的后端架构 cookie 的具体语法是不一样的,但是 cookie 原理和工作过程是不变的:cookie 不一定只由服务器生成,前端同样可以生成 cookie,但是前端生成的 cookie 几乎没有意义。

# 使用

# 服务器“种下”cookie

在 express 给客户端“种下”一个 cookie,不用借助任何第三方库

response.cookie('mycookie', '这是一个cookie')
1

# 服务器获取用户传过来的 cookie

在 express 中更方便的获取客户端携带过来的 cookie,要借助一个中间件,名字:cookie-parser

let cookieParser = require('cookie-parser')
// 使用cookieParser,解析浏览器携带过来的cookie为一个对象,随后挂载到request上
app.use(cookieParser())

// 获取request上的cookie
request.cookies
1
2
3
4
5
6

# 服务器删除 cookie

response..clearCookie('mycookie')
1

# session

# session 是什么

  1. 标准来说,session 指的是会话,但是后端人员常说的 session,全称叫:服务器 session 会话存储

# 特点

  1. 存在于服务端
  2. 存储的 是浏览器和服务器之间沟通产生的一些信息
  3. 默认 session 的存储在服务器的内存中,每当一个新客户端发来请求,服务器都会新开辟出一块空间,供 session 会话存储使用

# 工作流程

  1. 第一浏览器请求服务器的时候,服务器会开辟出一块内存空间,供 session 会话存储使用
  2. 返回响应的时候,会自动返回一个 cookie(有时候会返回多个,为了安全),cookie 里包含着,上一步产生会话存储“容器”的编号(id)
  3. 以后请求的时候,会自动携带这个 cookie 给服务器
  4. 服务器从该 cookie 中拿到对应的 session 的 id,去服务器中匹配
  5. 服务器会根据匹配信息,决定下一步具体的业务逻辑

# 备注:一般来说 cookie 一定会配合 session 使用

# 使用

# 下载安装

  1. 用于在 express 中操作 session
    npm i express-session --save
  2. 用于将 session 写入数据库(session 持久化)
    npm i connent-mongo --save

# 引入

  1. 引入 express-session 模块
const session = require('express-session') // 引入express-session模块
1
  1. 引入 connect-mongo 模块
const MongoStroe = require('connect-mongo')(session) // 引入connect-mongo模块
1

# 编写全局配置对象

// 配置全局对象
app.use(
  session({
    name: 'userid', // 设置cookie的name,默认值是connect.sid
    secret: 'coderly', // 参与加密的字符串(又称签名)
    saveUninitialized: false, // 是否在存储内容之前创建会话
    resave: true, // 是否在每次请求时,强制重新保存session,即使它们没有变化
    store: new MongoStroe({
      url: 'mongodb://localhost:27017/cookies_container',
      touchAfter: 24 * 3600, // 修改频率(例:在24小时之内只更新一次)
    }),
    cookie: {
      httpOnly: true, // 开启后前端无法通过JS操作cookie
      maxAge: 1000 * 30, // 设置cookie的过期时间
    },
  })
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 向 session 中添加一个 xxx,值为 yyy:

req.session.xxx=yyy

# 获取 session 上的 xxx 属性:

const { xxx } = req.session

# 使用详解

# 设置
  1. 在服务器中开辟一块内存空间,用于存储 session
  2. 将用户的 id 存入上一步产生的 session 中
  3. 获取 session 的编号,放入一个 cookie 中
  4. 将上一步的 cookie 返回给客户端
request.session._id = findResult._id
1
# 获取
  1. 读取 cookie,读取 cookie 总的 session 容器编号
  2. 去服务器中匹配该编号对应的 session 容器
  3. 根据匹配结果,进行具体的业务逻辑
const { _id } = request.session
1
#Cookie#Session
上次更新: 2021/03/25, 12:42:28
http协议
跨域问题总结

← http协议 跨域问题总结→

最近更新
01
代码片段
04-22
02
koa全家桶
03-29
03
mocks项目复盘
03-29
更多文章>
Theme by Vdoing | Copyright © 2021-2022 coderly | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式