菜鸟笔记
提升您的技术认知

session和cookie以及token和storage

cookie

前言

cookie其实就是一些数据信息,类型为“小型文本文件”,其保存在浏览器中。一般由服务器生成可设置失效时间,如果再浏览器生成则默认关闭浏览器后失效,其存放数据的大小为每个cookie大约4k,对于在每个域的储存数目谷歌浏览器没限制,其他浏览器另说

cookie的作用域

前言:domain和path标识定义了cookie的作用域,即cookie应该发送给那些url

  • domain:标识指定了那些主机可以接收该cookie,若不指定,默认为当前文档的主机(不包含子域名);若指定了domain,则一般包含子域名(如:若设置了domain=520it.com,则cookie也包含在子域名中——bbs.520it.com)
  • path:标识指定了主机下的那些路径可以接收该cookie,子路径也会被匹配(如:设置path=/docs,则/docs/one/也会被匹配)

cookie过程 

理解:浏览器发起http请求,服务器会进行cookie设置也就是setcookie。cookie里有名和值两种属性,服务器会把名和值里的内容给填充完整然后将其发给浏览器,之后浏览器会保存起来,这样浏览器以后发送的每一个请求都会自动附上这个cookie

注意

  • cookie是有有效期的,cookie到期后浏览器会自动删除该cookie
  • cookie里面有名与值两种属性,同时cookie也是一种数据载体
  • cookie是绑定在特定域名上的,当设置了一个cookie之后再给创建它的域名发送一个请求时还会包含该cookie,并且包含在http请求头中
  • 不同浏览器之间cookie不共用
  • 要在服务器环境下才可以设置cookie
  • 我们打开浏览器是可以看见保存了那些cookie,因此把用户名和密码放在cookie里不安全(电脑被黑的情况下;因此需要后面的session,用sessionid来代替用户名密码)

使用 

//前端设置cookie——在对应域名下的控制台使用
document.cookie="name=阿飞;"//不设置时间默认关闭浏览器后失效
//expires设置有效期,值是一个日期对象(国际标准时间)
var date=new Date().getTime()//当前时间转换成毫秒数
var newdate=new Date(date+30*24*60*60*1000)//设置过期时间为一个月
document.cookie="name=阿飞;expres="+newdate.toUTCString()

//获取cookie
var cookie=document.cookie
//所有的cookie都存在上面的cookie这一个属性里面,以字符串的形式
console.log(cookie);
//cookie集合格式:name1=value1;name2=value2;name3=value3——注意整体是个字符串

//注意:cookie并不提供修改和删除操作
//修改只需要重建一个重名的cookie来覆盖原来的cookie
//删除直接把重名的cookie过期时间改为过去

session

前言

session是一个存储在服务器上类似于一个散列表格的文件,里面存有我们需要的信息,在我们需要的时候可以从里面取出来,类似于一个大号的map吧里面的键存储的是用户的sessionid,用户向服务器发起请求时会带上这个sessionid,这时就可以从对应的服务器中取出对应的值

会话的开始:浏览器访问服务器

会话的结束:不同网站对每个用户的会话都设置了失效时间以及唯一的id(sessionid)

session过程

理解:session相当于在服务端开了一个房,没有钥匙是找不到这个房间的,因此在前端设置一个cookie,这个cookie里面存一个sessionid,这个sessionid是唯一打开这个这个房间的钥匙,每次请求时带着这把钥匙,这样便可以在服务器中找到自己的登录状态

为什么禁用cookie就得不到session

因为session是用sessionid来确定当前对话所对应的服务session,而sessionid是通过cookie传递的,禁用cookie相当于失去sessionid也就得不到session

注意

  • 因为session是服务器自己定义的东西,所以一般保存在数据库里面
  • sessionid通常为一串没有规律的字符串
  • 服务器在发送sessioncookie之前会对这个含有sessionid的cookie进行签名(标志他和其他cookie不一样,他是sessioncookie)

session存储

  1. 存储在服务器上,多台服务器需要session复制
  2. 存储在数据库中,多台服务器从数据库中取数据

使用

初始化npm:npm init

安装express模块:npm i express

安装express-session模块:npm i express-session 

安装connect-mongo模块:npm i connect-mongo

引入express模板:var  express=require("express") 

引入session模块:var session=require("express-session")

引入connect-mongo模块:var MongoStore=require("connect-mongo")

var session=require("express-session")
var express=require("express")
var MongoStore=require("connect-mongo")
var app=express()
//注册session中间件
app.use(session({
    name:"cjc",
    secret:"dw1234dwps",
    cookie:{
        maxAge:1000*60*60,//过期时间,一小时后过期
        secure:false//为true时表示只有https协议才能访问cookie
    },
    resave:true,//设置为true表示重新设置session后,过期时间便会重新开始计算
    saveUninitialized:true,
    //该属性为true时就是一开始就会给你一个cookie但是这个cookie是无效的,除非你登陆成功之后操作一下session,cookie才会有效
    //若为false则就是起初不给cookie除非你登陆成功了,操纵session才会给cookie
    store:MongoStore.create({
        mongUrl:"mongodb://127.0.0.1/cjc_session",
        ttl:1000*60*10//过期时间
    })
    //将session存储到数据库中,我们设置session时会通过mongostore这个模块把我们存的session值都放在数据库里
}))
//设置中间件,session过期校验
app.use((req,res,next)=>{
    if(req.url.includes("/")){
        next()
        return
    }
    if(req.session.user){
        //重设session以保证过期时间重新计算
        req.session.user=true//user就是一个变量
        next()
    }else{
        //是接口就返回错误码,不是接口就重定向
    }
})
app.get("/",(req,res)=>{
    console.log("进来了");
    //登陆成功时设置session
    //这个session是一个对象,下面相当于在session里挂一个user字段
    req.session.user="我的数据"
    //判断有没有钥匙
    if(req.session.user){
        //退出登录,销毁session
        req.session.destroy(()=>{
            send("destory success")
        })
    }else{
        res.send("没有我的数据")
    }
})
app.listen(3000,()=>{
    console.log("server start");
})

json web Token(JWT)

前言

JWT的本质就是一个字符串,其存储在浏览器中,它是将用户信息保存到一个Json字符串中,然后进行编码后得到一个jwt并且这个jwt带有签名信息,接收后可以校验是否被篡改,所以可以用于在各方之间安全地将信息作为Json对象传输。

jwt过程 

jwt组成部分(三部分,中间用.分割)

eg:header.payload.signature

  1. header:声明用什么算法生成签名
  2. payload:一些特定的数据,比如有效期等
  3. signature:签名信息(服务器保存的部分)

注意

  • jwt三部分紧密相连不可分割,若修改一个部分,则整个部分都会报错
  • signature由header和payload经由base64编码再经过header的算法将两个部分进行运算最终得到签名信息(保证令牌的唯一性)
  • token只能等到过期才会失效,无法在服务端注销
  • token一般都存在localStorage中,也有过期时间字段

使用

npm初始化:npm init

安装jwt模块:npm i jsonwebtoken

 引入jwt模块:var jwt=require("jsonwebtoken")

var jwt=require("jsonwebtoken")
//jwt生成token
var token=jwt.sign({
    data:'数据内容'
},'密钥部分',{expiresIn:'10s'})
console.log(token);

//校验token
var decode=jwt.verify(token,'密钥部分')
console.log(decode);
//检验jwt过期
setTimeout(() => {
    var decode=jwt.verify(token,'密钥部分')
    console.log(decode);
}, 11000);

storage

storage分为localstorage和sessionstorage

localstorage和sessionstorage异同点

localstorage与sessionstorage共同点

  • 一般每个存放数据的大小为5mb
  • 两者均仅在客户端中保存,不参与和服务器之间的通信

localstorage与sessionstorage不同点

  • localstorage的数据生命周期为永久储存,除非你清除
  • sessionstorage的数据生命周期仅在当前会话有效,关闭页面或浏览器后被清除

注意:sessionstorage与localstorage存储用key:value数据结构,value值只能是字符串,无法储存对象,若要储存对象则要将其转化为字符串

使用

对于他们两者的操作基本相同,这里以sessionstorage为例

存值:window.sessionStorage.setItem(key,value)
取值:let value=sessionStorage.getItem(key)
清空数据:sessionStorage.removeItem(key)
清空所有数据:sessionStorage.clear()